https://github.com/moebiusmania/react-webcomponents
Some examples of integrating Web Components within a React application.
https://github.com/moebiusmania/react-webcomponents
components example integration javascript react webcomponents
Last synced: 2 months ago
JSON representation
Some examples of integrating Web Components within a React application.
- Host: GitHub
- URL: https://github.com/moebiusmania/react-webcomponents
- Owner: moebiusmania
- License: mit
- Created: 2018-03-20T08:32:10.000Z (about 7 years ago)
- Default Branch: main
- Last Pushed: 2023-10-25T13:53:16.000Z (over 1 year ago)
- Last Synced: 2025-01-31T08:35:34.310Z (4 months ago)
- Topics: components, example, integration, javascript, react, webcomponents
- Language: TypeScript
- Homepage: https://moebiusmania.github.io/react-webcomponents
- Size: 9.49 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React & WebComponents
> Some examples of integrating Web Components within a React application.
Built on top of the [Vite.js React + TS](https://vitejs.dev/guide/#trying-vite-online) template.
It also uses vanilla [CSS Modules](https://github.com/css-modules/css-modules) to share the styles between React components and Web Components.
### Introduction
As the [official React documentation](https://reactjs.org/docs/web-components.html#using-web-components-in-react) states, you **can** use Web Components within a React application.
Without additional code or techniques, Web Components are rendered inside the React Application as regular HTML elements, what is missing seamless integration between the two.
While this is being discussed (_and hopefully, implemented in a near future_) by the React team, as of React v16 you can manually implement the integration with a few lines of code.
### Data binding
To pass simple data type from React to a Web Component you can easily use React's data binding system:
```typescript
// Component.tsx
const [text, setText] = useState("hey there!");
return (
);
```
When it comes to `object` or `array` it will not work, a string conversion will be necessary:
```typescript
// Component.tsx
const [list, setList] = useState(["red", "green", "blue"]);
const stringed: string = JSON.stringify(list);
return (
);
```
on the Web component side you will have to decode it back to data using `JSON.parse()`, but since this is a limitation of the spec itself chances are that this is already happening or that the component is authored with a framework (_like Lit, Svelte, Stencil, ecc.._) that handle the issue.
### Events
React uses a _synthetic_ event system while Web Components work with standard events extended with custom ones, so out-of-the-box they don't cooperate between each other.
But since React is built on top of Javascript you can use the `.addEventListener()` API to listen for events from DOM nodes. In order to get DOM elements without using the `.querySelector()` api you can use React's `useRef` hook to achieve the result:
```typescript
// Component.tsx
const customElement = useRef(null);
const doSomething = (event: Event): void => { ... }
useEffect(() => {
customElement?.current?.addEventListener("my-event", doSomething)
return () => {
customElement?.current?.removeEventListener("my-event", doSomething)
}
}, [])
return(
)
```
The most annoying part of this workaround is that you have to manually listen for events and, for performance reasons, manually remove the listener when the React's parent is being removed from the DOM.
---
### Run locally
A few steps to quick-start the project:
Clone the repo on your machine, then
```
$ npm ci
```
to install dependencies, and
```
$ npm run dev
```
to start webserver on `localhost:3000`
### License
Released under the [MIT license](LICENSE).