react-stencil-wrapper

React Stencil Wrapper

This module enables you to easily wrap Stencil components in React apps, taking full advantage of life cycle hooks so events are added and removed whenever a React component is mounted and unmounted.

Example usage where 'st-button' is a Stencil component:

import { StencilComponentWrapper } from './react-stencil-wrapper';

function App() {
  const [name, setName] = useState('');

  render() {
    return (
      <div>
        <input
          type="text"
          onChange={e => setName(e.target.value)}
          name="name"
          value={name}
        />
        <hr/>
        <StencilComponentWrapper
          name={name}
          clickEvent={(e) => { console.log(`function was called ${e}`}}
          eventListeners={{
              buttonClicked: (e) =>{ console.log(`event was triggered ${e.detail}`)}}
          }}
          componentDidMountCallback={el => {
              el.focus();
          }}
        >
          <st-button>Click Me</st-button>
        </StencilComponentWrapper>
      </div>
    )
  }
}