https://github.com/webcomponents/react-integration
Converts web components into React components so that you can use them as first class citizens in your React components.
https://github.com/webcomponents/react-integration
Last synced: 8 months ago
JSON representation
Converts web components into React components so that you can use them as first class citizens in your React components.
- Host: GitHub
- URL: https://github.com/webcomponents/react-integration
- Owner: webcomponents
- License: mit
- Archived: true
- Created: 2015-11-25T01:51:59.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2018-05-29T22:24:18.000Z (about 8 years ago)
- Last Synced: 2025-07-23T10:57:58.039Z (11 months ago)
- Language: JavaScript
- Homepage:
- Size: 200 KB
- Stars: 306
- Watchers: 8
- Forks: 31
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Integration
***We're in the process of finding alternative, more sustainable ways to integrate better with React as React is also looking at ways to do the same. We've started another project at https://github.com/skatejs/val to try and make this more opt-in from consumers of web components and to open up the integration to libraries other than React.***
Converts web components into React components so that you can use them as first class citizens in your React components.
- Web components become lexically scoped so you can use them as tag names in JSX.
- Listen for custom events triggered from web components declaratively using the standard `on*` syntax.
- Passes React `props` to web components as properties instead of attributes.
- Works with any web component library that uses a standard native custom element constructor, not just Skate or native web components.
## Usage
Web components are converted to React components simply by passing them to the main react-integration function:
```js
import reactify from 'skatejs-react-integration';
// Create your constructor.
class MyComponent extends HTMLElement {};
// Define your custom element.
window.customElements.define('my-component', MyComponent);
// Reactify it!
export default reactify(MyComponent);
```
Usage with [SkateJS](https://github.com/skatejs/skatejs) is pretty much the same, Skate just makes defining your custom element easier:
```js
import reactify from 'skatejs-react-integration';
export default reactify(skate('my-component', {}));
```
### Lexical scoping
When you convert a web component to a React component, it returns the React component. Therefore you can use it in your JSX just like any other React component.
```js
const ReactComponent = reactify(WebComponent);
ReactDOM.render(, container);
```
### Custom events
Out of the box, React only works with built-in events. By using this integration layer, you can listen for custom events on a web component.
```js
// in MyComponent
var event = new Event('customevent');
elem.dispatchEvent(event);
// after reactified
```
Now when `customevent` is emitted from the web component, your `handler` on `ReactComponent` will get triggered.
### Web component properties
When you pass down props to the web component, instead of setting attributes like React normally does for DOM elements, it will set all `props` as properties on your web component. This is useful because you can now pass complex data to your web components.
```js
// reactified component
// in MyComponent
```
### Children
If your web component renders content to itself, make sure you're using Shadow DOM and that you render it to the shadow root. If you do this `children` and props get passed down as normal and React won't see your content in the shadow root.
### `ref`
If you need access the the underlying DOM element, you can use the standard [`ref` API](https://facebook.github.io/react/docs/more-about-refs.html). Beware that since you're dealing with a React Component, you'll need to use [`ReactDOM.findDOMNode`](https://facebook.github.io/react/docs/top-level-api.html#reactdom.finddomnode):
```js
import ReactDOM from 'react-dom';
const ReactComponent = reactify(class WebComponent extends HTMLElement {});
class MyComponent extends Component {
constructor() {
super();
this.webComponent = null;
}
render() {
return (
{
this.webComponent = ReactDOM.findDOMNode(reactComponent);
}}
/>
);
}
}
```
### Injecting `React` and `ReactDOM`
By default, the React integration will import `React` and `ReactDOM` via `peerDependencies`. However, you can override this by passing your own versions:
```js
import reactify from 'skatejs-react-integration';
import React from 'my-custom-react';
import ReactDOM from 'my-custom-react-dom';
class WebComponent extends HTMLElement {}
const ReactComponent = reactify(WebComponent, { React, ReactDOM });
```
### Multiple React versions
The integration sets a peer-dependency on React so you know what it's compatible with. That said, you still need to be mindful that the version of React you provide to the integration layer is correct.