Peter Mikitsh
Peter Mikitsh Software Engineer @ Zuora, former SWE @ Intuit. Southern California. RIT Alum. he/him

Generate React Bindings for Stencil Components

Generate React Bindings for Stencil Components

React doesn’t have the best support for web components out-of-the-box. Currently, React 16.9.0 is scored at 71% support, according to custom-elements-everywhere.com. With the right tooling, we can raise that to 100%.

Introducing stencil-react. It generates React components (“bindings”) for Stencil Web Components, including support for:

  • custom element properties,
  • custom element events,
  • react synthetic events (e.g., onClick),
  • aria-* attributes, and
  • TypeScript typings

All through the standard React interface you’re familiar with. Suppose we had a Button web component in our Stencil project @anjuna/core. Here’s the React usage:

1
2
3
4
5
6
7
8
9
10
11
12

import { Button } from '@anjuna/core-react';

const App = (
  <Button
    context="primary"
    anjBlur={(customBlurEvent) => { debugger; }}
    onClick={(syntheticReactClickEvent) => { debugger; }}
    aria-label="My ARIA Example"
  >
    Hello World
  </Button>
);

To generate your own React bindings, install stencil-react and make sure your Stencil v1 component library (e.g, @anjuna/core) is installed as an npm dependency.

1
2

npm i stencil-react
stencil-react @anjuna/core

For the full scoop, check out https://github.com/petermikitsh/stencil-react.