so://phie

blob: 51ee236a6028df9bbc23ca08baf92b45e28e074f (779 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 { dist } = figure({ createElement });
11
12// add your components to a bundle
13const ElementBundle = {
14  button: Button,
15};
16
17// add your bundles to the dictionary
18const html = dist({
19  el: ElementBundle,
20});
21
22function App() {
23  return html`
24    <main>
25      <el:button
26        type="primary"
27        on:click=${() => console.log('It works!')}
28      >
29        <span>Click me</span>
30      </el:button>
31    </main>
32  `;
33}
34
35function Button() {
36  return html`
37    <button
38      on:click=${props?.onClick}
39      class="btn btn--${props?.type}"
40    >
41      ${props?.children}
42    </button>
43  `;
44}
45
46render(createElement(App), document.querySelector('#root'));
47```