Awesome

A Mercedes-Benz R&D North America, Seattle HUB contribution

Reactify Web Component

Use web components with React properties and functions

Usage

import React from "react";
import reactifyWc from "reactify-wc";

// Import your web component. This one defines a tag called 'vaadin-button'
import "@vaadin/vaadin-button";

const onClick = () => console.log("hello world");

const VaadinButton = reactifyWc("vaadin-button");

export const MyReactComponent = () => (
  <>
    <h1>Hello world</h1>
    <VaadinButton onClick={onClick}>Click me!</VaadinButton>
  </>
);

Children, Props, Attributes, Functions, and Events

React does not handle properties and functions correctly for web components. This factory function returns a new React component for a given web component so you can use them.

Children

Children are dropped directly into the web component like normal.

Properties and Attributes

reactify-wc checks the passed properties by type to determine where they should go. strings, numbers, and booleans are set as attributes on the web component. All other data besides functions that have a property name that begin with /^on[A-Z]/ and children are set as props.

Booleans are special! HTML specification states that if an attribute is false, it should simply not appear. If you need a boolean to appear as a property, check the Forcing Types section.

Functions / Events

Any function that has a property name that starts with on[A-Z] or on-[a-z] is stripped of its prefix and added as an event listener. Examples:

onMyEvent -> addEventListener("myEvent")
on-my-event -> addEventListener("my-event")

Note that in the case of on[A-Z], the first letter is toLowerCaseed

const Example = () => (
  <VaadinButton onClick={handleClick}>Click</VaadinButton>
  // calls addEventListener('click', handleClick)
  // The 'on' prefix is truncated, and the next char lowercased

  <VaadinButton on-my-event={handleMyEvent}>Click</VaadinButton>
  // calls addEventListener('my-event', handleMyEvent)
  // The 'on-' prefix is truncated

  <VaadinButton functionalProp={functionalProp}>Click</VaadinButton>
  // adds a prop 'functionalProp' -> functionalProp
)

Events passed into the event handlers are browser events, not React SyntheticEvents.

From React to Web Components and Back Again

You can mix and match your reactified web components and React components:

const WriteNames = ({ names }) => names.map((name) => <p>{name}</p>);
const ReactifiedWc = reactifyWc("web-comp");

const names = ["Bryce", "Brion", "Pia", "Fabian", "Larry"];

const MyComponent = () => (
  <ReactifiedWc>
    <WriteNames names={names} />
  </ReactifiedWc>
);

Forcing Types

You can force any named property to be an event listener, property, attribute, or any combination of the three. This behavior is most useful for custom boolean behavior. For most cases, you will not need to force a type.

import React from "react";
import reactifyWc from "reactify-wc";

// Import your web component. This one defines a tag called 'my-element'
import "@vaadin/vaadin-button";

const VaadinButton = reactifyWc("my-element", {
  forceProperty: ["setMeAsAProp"],
  forceAttribute: ["setMeAsAnAttribute"],
  forceEvent: ["setMeAsAnEventListener"],
});

export const MyReactComponent = () => (
  <VaadinButton
    setMeAsAProp="value"
    setMeAsAnAttribute={[]}
    setMeAsAnEventListener={() => {}}
  >
    Click me!
  </VaadinButton>
);

Styling

Feel free to use React's style attribute (or other packages like Styled Components) to style your content. The example below will make the button text color red.

const VaadinButton = reactify("vaadin-button");

export const MyReactComponent = () => (
  <VaadinButton onClick={onClick} style={{ color: "red" }}>
    Click me!
  </VaadinButton>
);

Remember that some web components are in shadow DOMs and are not stylable from the outside. Content injected as children is always stylable.

Composability Details

Many web components are "composable," meaning that in order to get a desired functionality, you may need to put multiple tags together or inside one another. Technically speaking, when using reactify-wc, only top level web components and components that have direct React integration need to be reactified. For readability and ease of use, we recommend reactifying all web components if possible.

// Preferred method

const VaadinGrid = reactifyWc("vaadin-grid");
const VaadinGridColumn = reactifyWc("vaadin-grid-column");

const MyReactComponent = () => (
  <VaadinGrid items={items}>
    <VaadinGridColumn path="name.first" header="First name" onClick={onClick} />
    <VaadinGridColumn path="name.last" header="Last name" />
  </VaadinGrid>
);

// Will work, not preferred

const VaadinGrid = reactifyWc("vaadin-grid");

const MyReactComponent = () => (
  <VaadinGrid items={items}>
    <vaadin-grid-column path="name.first" header="First name" />
    <vaadin-grid-column path="name.last" header="Last name" />
  </VaadinGrid>
);

// Will work, not preferred

const VaadinGrid = reactifyWc("vaadin-grid");
const VaadinGridColumn = reactifyWc("vaadin-grid-column");

const MyReactComponent = () => (
  <VaadinGrid items={items}>
    <VaadinGridColumn path="name.first" header="First Name" onClick={onClick} />
    <vaadin-grid-column path="name.last" header="Last Name" />
  </VaadinGrid>
);

Testing and Examples

There is now a small test page filled with example web components and basic tests, available in the test folder. View the tests cloning the repo and running:

cd test;
npm install;
npm start;

Contribute

Contribute to the project in our git repo by opening a PR with changes. We have no official contribution guide yet.

Roadmap

Add Cypress to testing suite.
Do some deep comparison between the changing props, attributes, and especially event handlers so that we aren't setting and removing them on every componentDidUpdate.
Add CI/CD pipeline to GitHub.

Credits

This software was created in-house at Mercedes-Benz Research & Development North America, Seattle HUB. This software is provided under the MIT license. We're hiring!

Mercedes-Benz
logo