Skip to content

Commit 7007386

Browse files
committed
Add sortof components example to the readme
1 parent 13d8294 commit 7007386

1 file changed

Lines changed: 53 additions & 0 deletions

File tree

README.md

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,3 +48,56 @@ document.body.innerHTML = (
4848
</div>
4949
);
5050
```
51+
52+
53+
### New: "Sortof" Components!
54+
55+
`vhtml` intentionally does not transform JSX to a Virtual DOM, instead serializing it directly to HTML.
56+
However, it's still possible to make use of basic Pure Functional Components as a sort of "template partial".
57+
58+
When `vhtml` is given a Function as the JSX tag name, it will invoke that function and pass it `{ children, ...props }`.
59+
This is the same signature as a Pure Functional Component in react/preact, except `children` is an Array of already-serialized HTML strings.
60+
61+
This actually means it's possible to build compositional template modifiers with these simple Components, or even higher-order components.
62+
63+
Here's a more complex version of the previous example that uses a component to encapsulate iteration items:
64+
65+
```js
66+
let items = ['one', 'two'];
67+
68+
const Item = ({ item, index, children }) => (
69+
<li id={index}>
70+
<h4>{item}</h4>
71+
{children}
72+
</li>
73+
);
74+
75+
console.log(
76+
<div class="foo">
77+
<h1>Hi!</h1>
78+
<ul>
79+
{ items.map( (item, index) => (
80+
<Item {...{ item, index }}>
81+
This is item {item}!
82+
</Item>
83+
)) }
84+
</ul>
85+
</div>
86+
);
87+
```
88+
89+
The above outputs the following HTML:
90+
91+
```html
92+
<div class="foo">
93+
<h1>Hi!</h1>
94+
<ul>
95+
<li id="0">
96+
<h4>one</h4>This is item one!
97+
</li>
98+
<li id="1">
99+
<h4>two</h4>This is item two!
100+
</li>
101+
</ul>
102+
</div>
103+
```

0 commit comments

Comments
 (0)