@@ -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.
7999function 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
87107import htm from ' htm' ;
0 commit comments