Skip to content

Commit 2d02a4d

Browse files
authored
Clarify usage with integrations
1 parent ff8cf6f commit 2d02a4d

File tree

1 file changed

+24
-4
lines changed

1 file changed

+24
-4
lines changed

README.md

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -70,18 +70,38 @@ import { html, render } from 'https://unpkg.com/htm/preact/standalone.mjs'
7070

7171
## Usage
7272

73-
Since `htm` is a generic library, we need to tell it what to "compile" our templates to.
73+
If you're using Preact or React, we've included off-the-shelf bindings to make your life easier.
74+
They also have the added benefit of sharing a template cache across all modules.
7475

75-
The target should be a function of the form `h(type, props, ...children)` _([hyperscript])_, and can return anything.
76+
```js
77+
import { render } from 'preact';
78+
import { html } from 'htm/preact';
79+
render(html`<a href="/">Hello!</a>`, document.body);
80+
```
81+
82+
Similarly, for React:
83+
84+
```js
85+
import ReactDOM from 'react-dom';
86+
import { html } from 'htm/react';
87+
ReactDOM.render(html`<a href="/">Hello!</a>`, document.body);
88+
```
89+
90+
### Advanced Usage
91+
92+
Since `htm` is a generic library, so we need to tell it what to "compile" our templates to.
93+
You can bind `htm` to any function of the form `h(type, props, ...children)` _([hyperscript])_.
94+
This function can return anything - `htm` never looks at the return value.
95+
96+
Here's an example `h()` function that returns tree nodes:
7697

7798
```js
78-
// this is our hyperscript function. for now, it just returns a description object.
7999
function h(type, props, ...children) {
80100
return { type, props, children };
81101
}
82102
```
83103

84-
To use that `h()` function, we need to create our own `html` tag function by binding `htm` to our `h()` function:
104+
To use our custom `h()` function, we need to create our own `html` tag function by binding `htm` to our `h()` function:
85105

86106
```js
87107
import htm from 'htm';

0 commit comments

Comments
 (0)