react-stencil-wrapper v0.0.10

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>
    )
  }
}