Greetings, dev community! The highly-anticipated release of the new R2WC (react-to-web-component) API is here! We have been thrilled by the level of adoption version 1.0 has attained within the developer community. From our various online community forums, you have provided great feedback on your pain points and the ways in which we can improve R2WC. And we listened!

First: What is R2WC?

React to Web Component is the best way to encapsulate React components into standalone Web Components. It lets you use React anywhere!

Updates and New Features

Let’s get to the good stuff! Check out the new features in R2WC v2.

• TypeScript Support
• Simplified API
• Improved Syncing
• New npm Namespace
• Continue Support for React 16, 17, and 18

TypeScript Support

We are elated to announce that R2WC has full TypeScript support! TypeScript has cemented itself as a staple in the dev community and is a key ingredient for a successful open source project.

Simplified API

It’s uncommon when using a React package to have to pass in an instance of React and ReactDOM to the function call. That’s how version 1.0 of R2WC worked. Not anymore! We have added React and ReactDOM as peer dependencies for R2WC, with support for v16, 17, and 18 for React and ReactDOM.

Improved Syncing

One of the most common issues reported to us about R2WC version 1.0 is that props were not being accepted by the created web component in production. This is because propTypes are generally removed from a React project when it is built for production.

We are happy to announce that the internal functionality of R2WC no longer depends on propTypes! Instead, we have given you two ways to pass props to R2WC—as an array of prop names as strings or an object with key-value pairs being your prop names and their corresponding types.

import r2wc from '@r2wc/react-to-web-component'

type GreetingProps = {
  name: string;
}

const Greeting: FC<GreetingProps> = ({ name }) => {
  return <h2> Hello, { name } </h2>;
}


// Recommended
const GreetingWebComponent = r2wc(Greeting, { props: { name: "string" }})

// OR for simpler needs
/*
const GreetingWebComponent = r2wc(Greeting, { props: ["name"] })
*/

customElements.define('greeting-wc', GreetingWebComponent)

R2WC now takes two parameters—a ReactComponent and an options object. Here’s the full type definition.

function r2wc<Props extends object>(ReactComponent: React.ComponentType<Props>, options?: R2WCOptions<Props>): CustomElementConstructor

interface R2WCOptions<Props> {
  shadow?: "open" | "closed"
  props?: PropNames<Props> | Record<PropName<Props>, R2WCType>
}

type PropName<Props> = Extract<keyof Props, "string">
type PropNames<Props> = Array<PropName<Props>>

type R2WCType = "string" | "number" | "boolean" | "function" | "json"

If the shadow option is provided, R2WC creates a shadowRoot for the created web component and uses that as the container in which to mount the ReactComponent. You can read more about the shadowRoot property here.

New npm Namespace

The new version of R2WC will live in a new namespace on npm called '@r2wc/react-to-web-component'. Internally, it will utilize another package that will be published alongside it—'@r2wc/core'—which contains the meat of the functionality for the new version.

Our legacy version will still live in the namespace 'react-to-webcomponent' on npm and will also receive an update to utilize the new core. This means that it will also receive TypeScript support, freedom from propType issues, and benefit from the new syncing mechanism between attributes, properties, and props. However, to avoid breaking your current codebase, the legacy 'react-to-webcomponent' package will still take React and ReactDOM as parameters. See type definition below.

function r2wc<Props>(ReactComponent: React.ComponentType<Props>, React: ReactType, ReactDOM: ReactDOMRootType | ReactDOMRenderType, options?: R2WCOptions<Props>): CustomElementConstructor

Continue Support for React 16, 17, and 18

The new R2WC API from '@r2wc/react-to-web-component' will support the current version of React (v18 as of the writing of this article) and versions 16 and 17. Our new package will be released in two versions. v1 of ‘@r2wc/react-to-web-component' will support React 16 & 17 and will utilize React’s older rendering API for mounting your ReactComponent to the web component. v2 of '@r2wc/react-to-web-component' will support React 18 and will utilize React’s newer mounting mechanism of first creating a root container that then renders the ReactComponent.

Try React to Web Component yourself!

We are excited to have you all start using our new API and look forward to your feedback. Head on over to our CodeSandbox to play with R2WC. Happy coding! 😁

What do you think?

Drop into our Community Discord and let us know what you think of React to Web Component v2. We’d love to hear your thoughts, help you troubleshoot, and see what you’re working on!