Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.npmjs.com/package/@vercel/toolbar below:

@vercel/toolbar - npm

Manually inject the Vercel toolbar on any site.

npm install @vercel/toolbar

This library can be used with any framework

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

if (userIsEmployee) {
  mountVercelToolbar();
}

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;
}

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 />}
    </>
  );
}

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.

You can configure some options for the plugin by passing an object in like:

const withVercelToolbar = require('@vercel/toolbar/plugins/next')({
  devServerPort: 3123,
  enableInProduction: false,
});

The available options are

Port on which the toolbar's dev server will run locally (defaults to 43214)

The toolbar runs a server locally to check the local git branch and watch for it to change, so it can reload the page and show the correct comments view

Defaults to false. If true the toolbar's dev server will run when NODE_ENV === 'production'.

See the documentation for more details.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4