@stencil/react-output-target

Automate the creation of React component wrappers for your Stencil web components.

This package includes an output target for code generation that allows developers to generate a React component wrapper for each Stencil component and a minimal runtime package built around @lit/react that is required to use the generated React components in your React library or application.

Features

• ♻️ Automate the generation of React component wrappers for Stencil components
• 🌐 Generate React functional component wrappers with JSX bindings for custom events and properties
• ⌨️ Typings and auto-completion for React components in your IDE

Setup

Your Stencil Component Library

Install the @stencil/react-output-target package in your Stencil project as a development dependency:

npm install @stencil/react-output-target --save-dev

Configure the output target in your stencil.config.ts file:

import { Config } from '@stencil/core';
import { reactOutputTarget } from '@stencil/react-output-target';

export const config: Config = {
  outputTargets: [
    reactOutputTarget({
      // Relative path to where the React components will be generated
      outDir: '../path-to-react-library-or-app/src/',
    }),
    // dist-custom-elements output target is required for the React output target
    { type: 'dist-custom-elements' },
  ],
};

Build your Stencil project to generate the React component wrappers:

npm run build

The component wrappers will be generated in the specified output directory.

Your React Application or Library

Install the @stencil/react-output-target runtime package in your React project:

npm install @stencil/react-output-target

Note: The @stencil/react-output-target runtime package is required to use the generated React component wrappers. This package must be a dependency in your React project.

That's it! You can now import and use your Stencil components as React components in your React application or library.

Output Target Options