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 usually look like this:

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

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

The React env contains a base functionality that mounts your component preview to bit start. You can use this to wrap your components with theme providers, route providers or any custom code you need.
Open your preview/mounter.tsx to view the bare-bones mounter:

import { createMounter } from '@teambit/react.mounter';
import { ThemeProvider } from '@learnbit-react/material-ui.theme.theme-provider';

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

export default createMounter(MyReactProvider) as any;
Copied

There may be some cases where you need to apply custom webpack plugin for your component preview to render as expected. To do this, the preview() function can accept webpack transfomers. For example: Changing the Preview webpack config, create and use a webpack transformer:

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

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

You can learn more on transforming the Preview webpack configuration in the Bit Webpack scope.