Skip to content

Commit

Permalink
chore: update readme
Browse files Browse the repository at this point in the history
  • Loading branch information
sean-perkins committed Jan 5, 2024
1 parent e9b827c commit e53d7f1
Show file tree
Hide file tree
Showing 2 changed files with 8 additions and 3 deletions.
10 changes: 8 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,9 @@

<p align="center">

The Stencil React Output Target simplifies the process for Stencil web component library creators by automatically generating React component wrappers for Stencil components. With this package, Stencil component authors can ensure type safety, while also enjoying the familiarity of React-style syntax for their components and APIs. This solution leverages 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.
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.

</p>

Expand All @@ -19,6 +21,10 @@ The Stencil React Output Target simplifies the process for Stencil web component
<img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs welcome!" />
</p>

- ♾️ **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
Expand Down Expand Up @@ -48,7 +54,7 @@ export const config: Config = {

> 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
### Install the `@lit/react` package in your React app or library

The generated React components depend on the `@lit/react` package.

Expand Down
1 change: 0 additions & 1 deletion packages/react-output-target/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
"description": "React component wrappers for Stencil web components",
"license": "MIT",
"homepage": "https://github.com/stencil-community/stencil-react-output-target",

"repository": {
"type": "git",
"url": "https://github.com/stencil-community/stencil-react-output-target",
Expand Down

0 comments on commit e53d7f1

Please sign in to comment.