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