forked frompreactjs/preact-render-to-string
- Notifications
You must be signed in to change notification settings - Fork0
📄 Universal rendering for Preact: render JSX and Preact components to HTML.
License
NotificationsYou must be signed in to change notification settings
blakef/preact-render-to-string
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
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) <<
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>
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>
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>`);});
About
📄 Universal rendering for Preact: render JSX and Preact components to HTML.
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
No packages published
Languages
- JavaScript100.0%