# @stencil/react-output-target > React output target for @stencil/core components. Latest version **1.6.2** (published 2026-08-13) · MIT license · 0 weekly downloads ## Install ```sh npm install @stencil/react-output-target pnpm add @stencil/react-output-target yarn add @stencil/react-output-target bun add @stencil/react-output-target ``` ## Health **Score 75/100 (B)** — status: active. Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; high quality score. Warnings: low downloads. ## Facts | | | |---|---| | Version | 1.6.2 | | Published | 2026-08-13 | | First published | 2019-10-11 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 4 | | Unpacked size | 300 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Provenance | attested (GitHub Actions) | | GitHub stars | 266 | | Author | Ionic Team | | Maintainers | ionicjs, gm-os, vmfo, gnbm, johnny.jenkins, stencil-bot | ## Links - npm: https://www.npmjs.com/package/@stencil/react-output-target - Repository: https://github.com/stenciljs/output-targets - Homepage: https://stenciljs.com/ - Issues: https://github.com/stenciljs/output-targets/issues - npm.io page: https://npm.io/package/@stencil/react-output-target ## Dependencies (4) - [ts-morph](https://npm.io/package/ts-morph.md) ^28.0.0 - [@lit/react](https://npm.io/package/@lit/react.md) ^1.0.8 - [html-react-parser](https://npm.io/package/html-react-parser.md) ^5.2.17 - [react-style-stringify](https://npm.io/package/react-style-stringify.md) ^1.2.0 ## Recent versions - 1.6.2 (latest) — 2026-08-13 - 0.0.1-dev.11753708416.1bc385bb (dev) — 2025-07-28 - 0.2.1-0 (next) — 2022-01-05 - 1.6.1 — 2026-07-14 - 1.6.0 — 2026-06-25 - 1.5.3 — 2026-05-28 - 1.5.2 — 2026-04-27 - 1.5.1 — 2026-04-23 - 1.5.0 — 2026-04-10 - 1.4.2 — 2026-02-21 - 1.4.1 — 2026-02-10 - 1.4.0 — 2026-01-24 - 1.3.3 — 2026-01-23 - 1.3.2 — 2026-01-20 - 1.3.1 — 2026-01-19 - … 137 more at https://npm.io/package/@stencil/react-output-target/versions ## README # @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](https://www.npmjs.com/package/@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 - 🚀 Support for Server Side Rendering (SSR) when used with frameworks like [Next.js](https://nextjs.org/) ## Setup ### Your Stencil Component Library 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. ### Your React Application or Library 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](https://www.typescriptlang.org/docs/handbook/modules/theory.html#module-resolution). 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. ## Output Target Options | 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](https://stenciljs.com/docs/hydrate-app#hydrate-app), 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) | --- _Source: https://npm.io/package/@stencil/react-output-target · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._