Component Previews

A component's preview renders its Component Previews and documentation.

Preview is controlled by the preview() function in your env's *.bit-env.ts file. It should look like this:

import { ReactEnv } from '@bitdev/react-env.react-env-env';
import { ReactPreview } from '@teambit/preview.react-preview';

class MyEnv extends ReactEnv {
  preview(): EnvHandler<Preview> {
    return ReactPreview.from({
      mounter: require.resolve('./preview/mounter')
    });
  }
}
Copied

Preview configuration affects only component examples and docs inside Bit's UI.

It has no effect on how your component renders in consuming applications.

React component preview mounter

The React env renders your component previews in the local Bit dev server (`bit start`). You can use this to wrap your components with theme providers, route providers or any custom code you need.

Open your env's preview/mounter.tsx file to view the bare-bones configuration:

import { createMounter } from '@teambit/react.mounter';

export function MyReactProvider({ children }) {
  return <>{children}</>;
}

export default createMounter(MyReactProvider) as any;
Copied

Extending the base mounter

For advanced cases, you can fork the default mounter component in order to customize how your env mounts components.

Change preview bundler configuration

There may be some cases where you need to apply custom bundler configurations for your component previews to render as expected. For instance, to render Tailwind styles in your component previews. The default preview() function accepts bundler transformers. For example, to customize a Preview's webpack config, create and use a webpack transformer:

import { ReactEnv } from '@bitdev/react-env.react-env-env';
import webpackTransformer from './config/webpack.config';

class MyEnv extends ReactEnv {
  preview(): EnvHandler<Preview> {
    return ReactPreview.from({
      transformers: [webpackTransformer],
    });
  }
}
Copied

info

Learn more about webpack transformers in the Bit Webpack scope.

Host dependencies

In some cases you will need to add components used in a custom preview mounter to the hostDependencies array.

export class MyEnv extends ReactEnv {
  preview(): EnvHandler {
    return ReactPreview.from({
      mounter: require.resolve('./preview/mounter'),
      hostDependencies: [
        /* your composition dependency */
        /* make sure to include the following dependencies, as well, they're needed for bit's dev server*/
        '@teambit/mdx.ui.mdx-scope-context',
        '@mdx-js/react',
        'react',
        'react-dom',
      ],
    });
  }
}
Copied

Docs Template

You can also customize the look and feel of the component documentation page (Overview page).

To do this, create a docs-template.tsx file in your env, add your customizations (e.g. providers) and consume it in the preview() function:

import { createDocsTemplate } from '@teambit/docs.docs-template';

class MyEnv extends ReactEnv {
  preview(): EnvHandler<Preview> {
    return ReactPreview.from({
      docsTemplate: require.resolve('./preview/docs-template'),
    });
  }
}
Copied

docs-template.tsx:

import { createCustomTemplate } from '@my-org/my-scope.my-custom-template';

export function DocsProvider({ children }) {
  return <>{children}</>;
}

export default createCustomTemplate(DocsProvider);
Copied