so://phie

blob: aa438bff44342a8f3fc6cb576345b47981b5926f (786 bytes)[doc][blame][raw]

 1# figure
 2Reactive template literals for React
 3
 4### Example
 5
 6```javascript
 7import figure from '...';
 8
 9// initialize figure
10const { dict } = figure(React.createElement);
11
12// add your component to the dictionary
13const html = dict({
14  el: {
15    button: Button,
16  },
17});
18
19function App() {
20  return html`
21    <main>
22      <el:button
23        type="primary"
24        on:click=${() => console.log('It works!')}
25      >
26        <span>Click me</span>
27      </el:button>
28    </main>
29  `;
30}
31
32function Button() {
33  return html`
34    <button
35      on:click=${props?.onClick}
36      class="btn btn--${props?.type}"
37    >
38      ${props?.children}
39    </button>
40  `;
41}
42
43// render your App component as usual
44const root = document.querySelector('#root');
45ReactDOM.render(React.createElement(App), root);
46```