https://github.com/stencil-community/stencil-react-output-target
React component wrappers for Stencil web components using @lit/react.
https://github.com/stencil-community/stencil-react-output-target
lit react stenciljs stenciljs-output-target web-components
Last synced: about 1 month ago
JSON representation
React component wrappers for Stencil web components using @lit/react.
- Host: GitHub
- URL: https://github.com/stencil-community/stencil-react-output-target
- Owner: stencil-community
- License: mit
- Created: 2024-01-04T20:22:39.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-01-05T22:12:09.000Z (over 2 years ago)
- Last Synced: 2025-02-17T11:03:15.331Z (over 1 year ago)
- Topics: lit, react, stenciljs, stenciljs-output-target, web-components
- Language: TypeScript
- Homepage:
- Size: 256 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
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`](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.
♾️ **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
```bash
npm install @stencil-community/react-output-target --save-dev
```
## Usage
### Add the output target to your Stencil config
```ts
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.
```bash
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
```tsx
import { MyComponent } from './components/react-components';
export const App = () => {
return (
);
};
```