Wraps web components in React to allow usage and correct property passthrough
npm install reactify-wc_A Mercedes-Benz R&D North America, Seattle HUB contribution_
jsx
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 = () => (
<>
Hello world
Click me!
);
`
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
`jsx
const Example = () => (
Click
// calls addEventListener('click', handleClick)
// The 'on' prefix is truncated, and the next char lowercased
Click
// calls addEventListener('my-event', handleMyEvent)
// The 'on-' prefix is truncated
Click
// 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:
`jsx
const WriteNames = ({ names }) => names.map((name) => {name}
);
const ReactifiedWc = reactifyWc("web-comp");
const names = ["Bryce", "Brion", "Pia", "Fabian", "Larry"];
const MyComponent = () => (
);
`
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.
`jsx
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 = () => (
setMeAsAnAttribute={[]}
setMeAsAnEventListener={() => {}}
>
Click me!
);
`
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.
`jsx
const VaadinButton = reactify("vaadin-button");
export const MyReactComponent = () => (
Click me!
);
`
> 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.
`jsx
// Preferred method
const VaadinGrid = reactifyWc("vaadin-grid");
const VaadinGridColumn = reactifyWc("vaadin-grid-column");
const MyReactComponent = () => (
);
`
`jsx
// Will work, not preferred
const VaadinGrid = reactifyWc("vaadin-grid");
const MyReactComponent = () => (
);
`
`jsx
// Will work, not preferred
const VaadinGrid = reactifyWc("vaadin-grid");
const VaadinGridColumn = reactifyWc("vaadin-grid-column");
const MyReactComponent = () => (
);
`
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:
`bash
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
1. Add Cypress to testing suite.
2. 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`.