# react-2-webcomponent
> Convert react components to native Web Components.
Latest version **2.0.4** (published 2020-05-17) · MIT license · 0 weekly downloads
## Install
```sh
npm install react-2-webcomponent
pnpm add react-2-webcomponent
yarn add react-2-webcomponent
bun add react-2-webcomponent
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 2.0.4 |
| Published | 2020-05-17 |
| First published | 2020-05-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 13.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Satnam |
| Maintainers | satnam348 |
| Keywords | React, Preact, WebComponents |
## Links
- npm: https://www.npmjs.com/package/react-2-webcomponent
- Repository: https://github.com/satty1987/react-to-webcomponent
- Homepage: https://github.com/satty1987/react-to-webcomponent#readme
- Issues: https://github.com/satty1987/react-to-webcomponent/issues
- npm.io page: https://npm.io/package/react-2-webcomponent
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 2.0.4 (latest) — 2020-05-17
- 2.0.3 — 2020-05-17
- 2.0.1 — 2020-05-17
- 2.0.0 — 2020-05-17
## README
# react-2-webcomponent
`react-2-webcomponent` converts [React](https://reactjs.org/) components to [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)! It lets you share react components as native elements that __don't__ require mounted being through React. The custom element acts as a wrapper for the underlying react component. Use these custom elements in any framework (vue, svelte, angular, ember, canjs) the same way you would use standard HTML elements.
`react-2-webcomponent`:
- Works in all modern browsers. (Edge needs a [customElements polyfill](https://github.com/webcomponents/polyfills/tree/master/packages/custom-elements)).
- Is `1.11KB` minified and gzipped.
## Basic Use
Given a react component like:
```js
class Greeting extends React.Component {
render() {
return Hello, {this.props.name}
;
}
}
```
Call `reactToWebComponent` and [customElements.define](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define) as follows:
```js
import reactToWebComponent from "react-2-webcomponent";
const WebGreeting = reactToWebComponent(Greeting, React, ReactDOM);
customElements.define("web-greeting", WebGreeting);
```
Now you can use `` like any other HTML element!
You can create it programatically:
```js
const webGreeting = document.createElement("web-greeting");
webGreeting.name = "StandardsFan";
document.body.append(webGreeting);
webGreeting.innerHTML //-> "Hello, StandardsFan
"
```
Or you can use it declaratively:
```js
document.body.innerHTML = "";
document.body.firstChild.name = "CoolBeans";
document.body.firstChild.innerHTML //-> "Hello, CoolBeans
"
```
### Working with Attributes
By default, custom elements created by `reactToWebComponent` only
pass properties to the underlying React component. To make attributes
work, you must specify your component's properties with
[PropTypes](https://reactjs.org/docs/typechecking-with-proptypes.html) as follows:
```js
class Greeting extends React.Component {
render() {
return Hello, {this.props.name}
;
}
}
Greeting.propTypes = {
name: PropTypes.string.isRequired
};
```
Now `reactToWebComponent` will know to look for `name` attributes
as follows:
```js
document.body.innerHTML = "";
document.body.firstChild.innerHTML //-> "Hello, Amazed
"
```
## Setup
#### From NPM
To install from npm:
```
https://github.com/satty1987/react-to-webcomponent
```
## API
`reactToWebComponent(ReactComponent, React, ReactDOM)` takes the following:
- `ReactComponent` - A react component that you want to
convert to a Web Component.
- `React` - A version of React (or [preact-compat](https://preactjs.com/guide/v10/switching-to-preact)) the
component works with.
- `ReactDOM` - A version of ReactDOM (or preact-compat) that the component works with.
A new class inheriting from `HTMLElement` is
returned. This class can be directly passed to `customElements.define` as follows:
```js
customElements.define("web-greeting",
reactToWebComponent(Greeting, React, ReactDOM) );
```
Or the class can be defined and used later:
```js
const WebGreeting = reactToWebComponent(Greeting, React, ReactDOM);
customElements.define("web-greeting", WebGreeting);
var myGreeting = new WebGreeting();
document.body.appendChild(myGreeting);
```
Or the class can be extended:
```js
class WebGreeting extends reactToWebComponent(Greeting, React, ReactDOM)
{
disconnectedCallback(){
super.disconnectedCallback();
// special stuff
}
}
customElements.define("web-greeting", WebGreeting);
```
### How it works
`reactToWebComponent` creates a constructor function whose prototype is a [Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy). This acts as a trap for any property set on instances of the custom element. When a property is set, the proxy:
- re-renders the React component inside the custom element.
- creates an enumerable getter / setter on the instance
to save the set value and avoid hitting the proxy in the future.
Also:
- Enumerable properties and values on the custom element are used as the `props` passed to the React component.
- The React component is not rendered until the custom element is inserted into the page.
---
_Source: https://npm.io/package/react-2-webcomponent · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._