@vercel/toolbar

@vercel/toolbar

Manually inject the Vercel toolbar on any site.

Install

npm install @vercel/toolbar

Usage

This library can be used with any framework

Plain JS

import { mountVercelToolbar } from '@vercel/toolbar';

if (userIsEmployee) {
  mountVercelToolbar();
}

React

import { mountVercelToolbar, unmountVercelToolbar } from '@vercel/toolbar';

function VercelToolbar() {
  const shouldInjectToolbar = useIsUserEmployee();

  useEffect(() => {
    if (shouldInjectToolbar) {
      mountVercelToolbar();

      return () => {
        unmountVercelToolbar();
      };
    }
  }, [shouldInjectToolbar]);

  return null;
}

Next.js

For usage in Next.js, you can instead import the VercelToolbar component which will use next/script:

import { VercelToolbar } from '@vercel/toolbar/next';

export default function MyApp({ Component, pageProps }) {
  const shouldInjectToolbar = useIsUserEmployee();

  return (
    <>
      <Component {...pageProps} />
      {shouldInjectToolbar && <VercelToolbar />}
    </>
  );
}

Docs

See the documentation for details.