33[ ![ NPM] ( http://img.shields.io/npm/v/preact-render-to-string.svg )] ( https://www.npmjs.com/package/preact-render-to-string )
44[ ![ Build status] ( https://github.com/preactjs/preact-render-to-string/actions/workflows/ci.yml/badge.svg )] ( https://github.com/preactjs/preact-render-to-string/actions/workflows/ci.yml )
55
6- Render JSX and [ Preact] components to an HTML string.
6+ Render JSX and [ Preact] ( https://github.com/preactjs/preact ) components to an HTML string.
77
88Works in Node & the browser, making it useful for universal/isomorphic rendering.
99
1010\>\> ** [ Cute Fox-Related Demo] ( http://codepen.io/developit/pen/dYZqjE?editors=001 ) ** _ (@ CodePen)_ <<
1111
12-
1312---
1413
15-
1614### Render JSX/VDOM to HTML
1715
1816``` js
19- import render from ' preact-render-to-string' ;
17+ import { render } from ' preact-render-to-string' ;
2018import { h } from ' preact' ;
2119/** @jsx h */
2220
@@ -27,24 +25,23 @@ console.log(html);
2725// <div class="foo">content</div>
2826```
2927
30-
3128### Render Preact Components to HTML
3229
3330``` js
34- import render from ' preact-render-to-string' ;
31+ import { render } from ' preact-render-to-string' ;
3532import { h , Component } from ' preact' ;
3633/** @jsx h */
3734
3835// Classical components work
3936class Fox extends Component {
4037 render ({ name }) {
41- return < span class = " fox" > { name }< / span> ;
38+ return < span class = " fox" > {name}< / span> ;
4239 }
4340}
4441
4542// ... and so do pure functional components:
4643const Box = ({ type, children }) => (
47- < div class = {` box box-${ type} ` }> { children }< / div>
44+ < div class = {` box box-${ type} ` }> {children}< / div>
4845);
4946
5047let html = render (
@@ -57,22 +54,20 @@ console.log(html);
5754// <div class="box box-open"><span class="fox">Finn</span></div>
5855```
5956
60-
6157---
6258
63-
6459### Render JSX / Preact / Whatever via Express!
6560
6661``` js
6762import express from ' express' ;
6863import { h } from ' preact' ;
69- import render from ' preact-render-to-string' ;
64+ import { render } from ' preact-render-to-string' ;
7065/** @jsx h */
7166
7267// silly example component:
7368const Fox = ({ name }) => (
7469 < div class = " fox" >
75- < h5> { name }< / h5>
70+ < h5> {name}< / h5>
7671 < p> This page is all about {name}.< / p>
7772 < / div>
7873);
@@ -89,14 +84,8 @@ app.get('/:fox', (req, res) => {
8984});
9085```
9186
92-
9387---
9488
95-
9689### License
9790
98- [ MIT]
99-
100-
101- [ Preact ] : https://github.com/developit/preact
102- [ MIT ] : http://choosealicense.com/licenses/mit/
91+ [ MIT] ( http://choosealicense.com/licenses/mit/ )
0 commit comments