React to Web Component

Key Features

Simple API

React component + prop definition = Web component! See full api

Live updates

Changing the element’s attributes or properties triggers React updates.

Build and bundle

Create standalone components that can reside on a CDN.

Friendly experts

R2WC is a product of Bitovi.

React to Web Component is a Typescript library that packages any React component into a Web compnonent, usable by any framework or even none at all!

The props passed to the React component can be updated by directly updating the props on the component object

import r2wc from "@r2wc/react-to-web-component"
customElements.define(
  "my-component",
  r2wc(
    ({ name }) => <span> Hello {name}!</span>,
    { props: { name: "string" }}
  )
);

const MyComponent = document.createElement("my-component");
MyComponent.name = "Justin";
document.body.append(MyComponent); // will show "Hello Justin!"

or by updating the attributes of the component tag

// will show "Hello Brian!"
document.body.innerHTML += '<my-component name="Brian" ></my-component>';

// then "Hello Kyle!"
document.querySelector('my-component').setAttribute("name", "Kyle");

React to Web Component has attribute value conversions for string, number, object (JSON), and function prop types!

Get started today with the complete example guide.