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 &lt;button onclick={() => setCount(count + 1)}>Count: {count}&lt;/button>;
});

render(&lt;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', () => &lt;h1>Hello world!&lt;/h1>);

render(&lt;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:

&lt;script src="https://cdn.jsdelivr.net/npm/proxy-polyfill@0.3.0/proxy.min.js">&lt;/script>