The Stencil React Output Target simplifies the process for Stencil web component library creators by automatically generating React component wrappers for Stencil components. With this package, Stencil component authors can ensure type safety, while also enjoying the familiarity of React-style syntax for their components and APIs. This solution leverages the @lit/react package to streamline the process, making it easier than ever to create Stencil components that integrate seamlessly with React applications.

Installation

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

Usage

Add the output target to your Stencil config

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

export const config: Config = {
  namespace: 'mycomponentlibrary',
  outputTargets: [
    {
      type: 'dist-custom-elements',
    },
    reactOutputTarget({
      outputPath: '../react-demo/src/components/react-components.ts',
    }),
  ],
};

The react output target requires the dist-custom-elements output target to be configured as well. This is required to generate tree-shakable components.

Install the @lit/react package in your React app

The generated React components depend on the @lit/react package.

npm install @lit/react --save

Install the Stencil library in your React app or library

The React application should have a dependency to your Stencil library. This can be done with a variety approaches, including installing the npm package from the registry, symbolic linking, or using a tool like pnpm workspaces.

Use the React components in your React app or library

import { MyComponent } from './components/react-components';

export const App = () => {
  return (
    <div>
      <MyComponent
        first="Stencil"
        last="'Don't call me a framework' JS"
      ></MyComponent>
    </div>
  );
};