Component Documentation

Your components' docs are generated as part of the preview process. Change the preview's configuration to customize how your docs (and compositions) are bundled and rendered.

To customize your components' preview, implement the preview method in your env.

/* @filename: my-react-env.bit-env.ts */

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

import { Preview } from '@teambit/preview';
import { ReactPreview } from '@teambit/preview.react-preview';
import webpackTransformer from './config/webpack.config';

export class MyReactEnv extends ReactEnv {
  preview(): EnvHandler<Preview> {
    return ReactPreview.from({
      /* preview config goes here */
    });
  }
}

export default new MyReactEnv();
Copied

A component's preview configuration does not affect production code.

Review your preview's webpack config by running the following on a component that uses your env:

$bit envs get pages/welcome

Copied

The output is similar to the following:

To modify your preview's Webpack config, implement the preview method in your custom env. Provide the transformers property with an array of Webpack config transformers.

For example:

// @filename: my-react-env.bit-env.ts
// ...
import webpackTransformer from './config/webpack.config';

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

export default new MyReactEnv();
Copied

Learn how to create a Webpack transformer in Webpack transformers.

Docs are displayed in the components' 'Overview' tab. A component's documentation describes the function and purpose of the component and instructs on how to use it.

Update the glob patterns listed in your env's env.jsonc file to determine which files, in a component's directory, should be loaded as docs.

{
  "patterns": {
    "docs": ["**/*.docs.*", "**/*.readme.*"]
  }
}
Copied

Since docs are only used for development, every docs file is considered as a dev file.

A single component cannot have more than a single docs file.

Your components' documentation might require a certain context, such as a theme provider or a language provider.

The following example wraps every docs page with a theme provider:

The docs-template component is responsible for rendering your components' documentation. Replace the default template with your own component, to modify the way documentation is being rendered.

Run the following to fork the default docs template:

$bit fork teambit.docs/docs-template my-custom-template

Copied

Modify the forked component (docs template) and use it to replace the default docs template:

For example, see this docs template component which replaces the root.render with the older ReactDOM.render to mount React 17 components.