{"id":20504289,"url":"https://github.com/stencil-community/stencil-react-output-target","last_synced_at":"2026-05-06T19:37:33.348Z","repository":{"id":215689634,"uuid":"739120340","full_name":"stencil-community/stencil-react-output-target","owner":"stencil-community","description":"React component wrappers for Stencil web components using @lit/react.","archived":false,"fork":false,"pushed_at":"2024-01-05T22:12:09.000Z","size":262,"stargazers_count":1,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-17T11:03:15.331Z","etag":null,"topics":["lit","react","stenciljs","stenciljs-output-target","web-components"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stencil-community.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2024-01-04T20:22:39.000Z","updated_at":"2024-10-03T12:28:02.000Z","dependencies_parsed_at":"2024-01-05T23:30:57.598Z","dependency_job_id":"29c88aff-b33d-456f-a8db-f7be32a25577","html_url":"https://github.com/stencil-community/stencil-react-output-target","commit_stats":null,"previous_names":["stencil-community/stencil-react-output-target"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stencil-community%2Fstencil-react-output-target","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stencil-community%2Fstencil-react-output-target/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stencil-community%2Fstencil-react-output-target/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stencil-community%2Fstencil-react-output-target/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stencil-community","download_url":"https://codeload.github.com/stencil-community/stencil-react-output-target/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242101763,"owners_count":20071948,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["lit","react","stenciljs","stenciljs-output-target","web-components"],"created_at":"2024-11-15T19:37:15.286Z","updated_at":"2026-05-06T19:37:33.317Z","avatar_url":"https://github.com/stencil-community.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"#\"\u003e\n    \u003cimg alt=\"Stencil React Output Target\" src=\"https://github.com/stencil-community/stencil-react-output-target/blob/main/.github/logo.png?raw=true\" width=\"84\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003e\n  Stencil React Output Target\n\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n\nWhile 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.\n\nThis package makes use of the [`@lit/react`](https://www.npmjs.com/package/@lit/react) package to streamline the process, making it easier than ever to create Stencil components that integrate seamlessly with React applications.\n\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/license-MIT-blue.svg\" alt=\"Stencil React Output Target is released under the MIT license.\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/PRs-welcome-brightgreen.svg\" alt=\"PRs welcome!\" /\u003e\n\u003c/p\u003e\n\n♾️ **Interoperability**: Enables seamless integration of Stencil components in React applications.\n\n📦 **Consistency**: Provides a consistent developer experience for teams working with both Stencil and React.\n\n♻️ **Reusability**: Write once in Stencil, and use across different frameworks.\n\n## Installation\n\n```bash\nnpm install @stencil-community/react-output-target --save-dev\n```\n\n## Usage\n\n### Add the output target to your Stencil config\n\n```ts\nimport { Config } from '@stencil/core';\nimport { reactOutputTarget } from '@stencil-community/react-output-target';\n\nexport const config: Config = {\n  namespace: 'mycomponentlibrary',\n  outputTargets: [\n    {\n      type: 'dist-custom-elements',\n    },\n    reactOutputTarget({\n      outputPath: '../react-demo/src/components/react-components.ts',\n    }),\n  ],\n};\n```\n\n\u003e The react output target requires the `dist-custom-elements` output target to be configured as well. This is required to generate tree-shakable components.\n\n### Install the `@lit/react` package in your React app or library\n\nThe generated React components depend on the `@lit/react` package.\n\n```bash\nnpm install @lit/react --save\n```\n\n### Install the Stencil library in your React app or library\n\nThe 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.\n\n### Use the React components in your React app or library\n\n```tsx\nimport { MyComponent } from './components/react-components';\n\nexport const App = () =\u003e {\n  return (\n    \u003cdiv\u003e\n      \u003cMyComponent\n        first=\"Stencil\"\n        last=\"'Don't call me a framework' JS\"\n      \u003e\u003c/MyComponent\u003e\n    \u003c/div\u003e\n  );\n};\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstencil-community%2Fstencil-react-output-target","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstencil-community%2Fstencil-react-output-target","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstencil-community%2Fstencil-react-output-target/lists"}