Stencil React Output Target

While Web Components can be used in React, they don't always integrate smoothly due to React's synthetic event system and handling of properties vs. attributes. The React output target helps bridge these gaps by creating a React component wrapper for each custom element, allowing you to use the custom element in React as if it were a native React component.

This package makes use of the @lit/react package to streamline the process, making it easier than ever to create Stencil components that integrate seamlessly with React applications.

♾️ Interoperability: Enables seamless integration of Stencil components in React applications.

📦 Consistency: Provides a consistent developer experience for teams working with both Stencil and React.

♻️ Reusability: Write once in Stencil, and use across different frameworks.

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 or library

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>
  );
};