dna-poster

DNA

Progressive Web Components.

Use in React

Web Components support in React is really poor: you can instantiate nodes with attributes, but you can't give them referenced properties or slotted children. DNA exposes a module that automatically wrap the Custom Element into a React Component, with a full TypeScript support.

First of all, make sure you have DNA installed, as well as the React peer dependency.

$ npm i @chialab/dna react react-dom

Then, you can import the DNA Root component and use it as wrapper for DNA components:

dialog.ts

import { Component, customElements, html, property } from '@chialab/dna';

class Dialog extends Component {
    static get observedAttributes() {
        return ['title'];
    }

    @property() title = '';

    render() {
        return html`
            <div class="layout-container">
                <div class="layout-header">
                    <h1>${this.title}</h1>
                </div>
                <div class="layout-content">
                    <slot />
                </div>
            </div>
        `;
    }
}

customElements.define('x-dialog', Dialog, { extends: 'dialog' });

declare namespace JSX {
    interface IntrinsicElements {
        'x-dialog': Dialog;
    }
}

app.ts

import React from 'react';
import ReactDOM from 'react-dom';
import { Root } from '@chialab/dna/react';
import './dialog';

ReactDOM.render(
    <Root>
        <dialog is="x-dialog" title="Hello world!">
            <p>...</p>
        </dialog>
    </Root>,
    document.body
);