React output target for @stencil/core components.
npm install @stencil/react-output-targetAutomate 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.
- ♻️ 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
- 🚀 Support for Server Side Rendering (SSR) when used with frameworks like Next.js
Install the @stencil/react-output-target package in your Stencil project as a development dependency:
``bash`
npm install @stencil/react-output-target --save-dev
Configure the output target in your stencil.config.ts file:
`ts
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:
`bash`
npm run build
The component wrappers will be generated in the specified output directory.
Install the @stencil/react-output-target runtime package in your React project:
`bash`
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.
Verify or update your tsconfig.json file to include the following settings:
`json`
{
"compilerOptions": {
"module": "esnext",
"moduleResolution": "bundler"
}
}
> moduleResolution": "bundler" is required to resolve the secondary entry points in the @stencil/react-output-target runtime package. You can learn more about this setting in the TypeScript documentation.
Verify or install Typescript v5.0 or later in your project:
`bash`
npm install typescript@5 --save-dev
That's it! You can now import and use your Stencil components as React components in your React application or library.
| Property | Description |
| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| outDir (required) | The directory where the React components will be generated. |esModules
| | If true, the output target will generate a separate ES module for each React component wrapper. Defaults to false. |stencilPackageName
| | The name of the package that exports the Stencil components. Defaults to the package.json detected by the Stencil compiler. |excludeComponents
| | An array of component tag names to exclude from the React output target. Useful if you want to prevent certain web components from being in the React library. |customElementsDir
| | The directory where the custom elements are saved. This value is automatically detected from the Stencil configuration file for the dist-custom-elements output target. If you are working in an environment that uses absolute paths, consider setting this value manually. |hydrateModule
| | For server side rendering support, provide the package for importing the Stencil Hydrate module, e.g. my-package/hydrate. This will generate two files: a component.server.ts which defines all component wrappers and a components.ts that re-exports these components for importing in your application. |excludeServerSideRenderingFor` | A list of components that won't be considered for Server Side Rendering (SSR) |
|