Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 313 Commits
config		config
src		src
test		test
.gitignore		.gitignore
.travis.yml		.travis.yml
LICENSE		LICENSE
README.md		README.md
jsx.d.ts		jsx.d.ts
jsx.js		jsx.js
package-lock.json		package-lock.json
package.json		package.json
tsconfig.json		tsconfig.json
typings.json		typings.json

Repository files navigation

preact-render-to-string

Render JSX andPreact components to an HTML string.

Works in Node & the browser, making it useful for universal/isomorphic rendering.

>>Cute Fox-Related Demo(@ CodePen) <<

Render JSX/VDOM to HTML

importrenderfrom'preact-render-to-string';import{h}from'preact';/**@jsx h */letvdom=<divclass="foo">content</div>;lethtml=render(vdom);console.log(html);// <div>content</div>

Render Preact Components to HTML

importrenderfrom'preact-render-to-string';import{h,Component}from'preact';/**@jsx h */// Classical components workclassFoxextendsComponent{render({ name}){return<spanclass="fox">{name}</span>;}}// ... and so do pure functional components:constBox=({ type, children})=>(<divclass={`box box-${type}`}>{children}</div>);lethtml=render(<Boxtype="open"><Foxname="Finn"/></Box>);console.log(html);// <div><span>Finn</span></div>

Render JSX / Preact / Whatever via Express!

importexpressfrom'express';import{h}from'preact';importrenderfrom'preact-render-to-string';/**@jsx h */// silly example component:constFox=({ name})=>(<divclass="fox"><h5>{name}</h5><p>This page is all about{name}.</p></div>);// basic HTTP server via express:constapp=express();app.listen(8080);// on each request, render and return a component:app.get('/:fox',(req,res)=>{lethtml=render(<Foxname={req.params.fox}/>);// send it back wrapped up as an HTML5 document:res.send(`<!DOCTYPE html><html><body>${html}</body></html>`);});