React Component Generators

Component generators are pre-configured templates that make it easy to create new components with much of their boilerplate code and configuration included.

Run the following to list the available component templates:

$bit
Copiedcopy
See command synopsis

The output lists component generators that are provided by different sources. One of these sources is your env.

The following template(s) are available with the command bit create: Example - bit create <template-name> <component-name>

react (my-org.my-scope/evs/my-react-env)
react
react-hook
react-context
react-app
Don't see your env listed?

If your don't see your env listed, you're probably missing the following config, in your workspace.jsonc (replace the env id with your own):

{
  "teambit.generator/generator": {
    "envs": ["my-org.my-scope/my-react-env"]
  }
}
CopiedCopy

Run the following to create a new component using one of the available generators:

$bit
Copiedcopy
See command synopsis

The generator should create the following files:

. └── use-counter ├── index.ts ├── use-counter.composition.tsx ├── use-counter.docs.mdx ├── use-counter.spec.tsx └── use-counter.tsx

The generator should also set your component with pre-made configuration. Run the following to inspect it:

$bit
Copiedcopy

Notice how your component is already set to use your env:

┌──────────────────┬─────────────────────────────────────────────────────────────┐ │ id │ my-org.my-scope/hooks/use-counter │ ├──────────────────┼─────────────────────────────────────────────────────────────┤ │ env │ my-org.my-scope/envs/my-react-env │ ├──────────────────┼─────────────────────────────────────────────────────────────┤ │ dev dependencies │ @my-org/my-scope.envs.my-react-env@latest-----(component) │ └──────────────────┴─────────────────────────────────────────────────────────────┘

Change your generators' properties

  • name: the generator's name
  • description: the generators description
  • hidden: display the generator only when running bit templates --show-all
  • env: set the generated components with this env (component id)

Install the component that provides the generators to customize its properties:

$bit
Copiedcopy

Implement the generator env handler in your env, and provide the generators with the properties to override:

// @filename: env.jsonc
// ...
import { TemplateList } from '@teambit/generator';
import { ReactComponentTemplate } from '@teambit/react.generator.react-templates';

export class MyReactEnv extends ReactEnv implements ReactEnvInterface {
  generators() {
    return TemplateList.from([
      ReactComponentTemplate.from({
        name: 'new-name',
        description:
          'standardize and speed up development with this react template',
      }),
    ]);
  }
}

export default new MyReactEnv();
CopiedCopy

Extend or customize your generators

To extend or customize your generators, fork the generator component and set your env with you own custom component, instead.

Run the following to fork the default React generator component:

$bit
Copiedcopy

Customize the various templates provided by that generator component. Set your env with the new (forked) generator:

// @filename: env.jsonc
// ...
import { TemplateList } from '@teambit/generator';
import { MyReactGenerator } from '@my-org/my-scope.generators.my-react-generator';

export class MyReactEnv extends ReactEnv {
  generators() {
    return TemplateList.from([MyReactGenerator.from()]);
  }
}

export default new MyReactEnv();
CopiedCopy

You can also add generators to the existing ones, by adding the forked component to the array of generators:

// @filename: env.jsonc
// ...
import { TemplateList } from '@teambit/generator';
import { ReactComponentTemplate } from '@teambit/react.generator.react-templates';
import { MyReactGenerator } from '@my-org/my-scope.generators.my-react-generator';

export class MyReactEnv extends ReactEnv {
  generators() {
    return TemplateList.from([
      ReactComponentTemplate.from(),
      MyReactGenerator.from(),
    ]);
  }
}

export default new MyReactEnv();
CopiedCopy

Make sure there are no naming conflicts between the existing generators and the generators that were added by you.