@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) {
      // Returns a cleanup function to unmount the toolbar
      return mountVercelToolbar();
    }
  }, [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 />}
    </>
  );
}

Usage in localhost

Allows you to view comments left in your preview deployment while developing locally.

Prerequisites:

• You have linked your project with the Vercel project via vc link
• You have checked out the same branch as the preview

Adjust the code above, to always inject the toolbar in development

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

export default function MyApp({ Component, pageProps }) {
  const isUserEmployee = useIsUserEmployee();
  const shouldInjectToolbar =
    process.env.NODE_ENV === 'development' || isUserEmployee;

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

Then, import and use the Next.js plugin in your next.config.js:

// next.config.js
const withVercelToolbar = require('@vercel/toolbar/plugins/next');

const nextConfig = {
  ...
}

module.exports = withVercelToolbar(nextConfig);

Now, when running next dev you will see the Vercel toolbar and will be able to authenticate and interact with all the comments left in the preview environment of that branch.

Docs

See the documentation for details.