DNA
Progressive Web Components.
Hooks
Hooks API had been introduced in the React library with the aim to replace class-based components with functional components. Since Web Components must extends the HTMLElement class, DNA has not a core Hooks API, but it provides an adapter hooks
which uses the haunted library under the hoods.
Install the library
Haunted is a DNA's optional dependency, so we need to install it along the DNA library:
$ npm i @chialab/dna haunted
Usage
Now, you can import the hook
factory to define a Web Component Hook:
import { hook, html, render } from '@chialab/dna/hooks'; const Counter = hook('counter-hook', () => { const [count, setCount] = useState(0); return <button onclick={() => setCount(count + 1)}>Count: {count}</button>; }); render(<Counter />, document.body);
You can also use the hook
factory to define plain template components:
import { hook, html, render } from '@chialab/dna/hooks'; const HelloWorld = hook('hello-world', () => <h1>Hello world!</h1>); render(<HelloWorld />, document.body);
Please refer to the haunted documentation for hook methods:
Compatibility
Hook components uses the same shimmed constructor provided by DNA in order to invoke life cycle methods without requiring polyfills. They are also forced to render children to the component root instead of their shadow roots. Since haunted uses Proxy, you need to include a polyfill for non-modern browsers like IE11:
<script src="https://cdn.jsdelivr.net/npm/proxy-polyfill@0.3.0/proxy.min.js"></script>