Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork97
📄 Universal rendering for Preact: render JSX and Preact components to HTML.
License
NotificationsYou must be signed in to change notification settings
preactjs/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) <<
import{render}from'preact-render-to-string';import{h}from'preact';/**@jsx h */letvdom=<divclass="foo">content</div>;lethtml=render(vdom);console.log(html);// <div>content</div>
import{render}from'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';import{render}from'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>`);});
Rendering errors can be caught by Preact viagetDerivedStateFromErrors orcomponentDidCatch. To enable that feature inpreact-render-to-string seterrorBoundaries = true
import{options}from'preact';// Enable error boundaries in `preact-render-to-string`options.errorBoundaries=true;
Suspense &lazy components withpreact/compat
npm install preact preact-render-to-string
exportdefault()=>{return<h1>Home page</h1>;};
import{Suspense,lazy}from'preact/compat';// Creation of the lazy componentconstHomePage=lazy(()=>import('./pages/home'));constMain=()=>{return(<Suspensefallback={<p>Loading</p>}><HomePage/></Suspense>);};
import{renderToStringAsync}from'preact-render-to-string';import{Main}from'./main';constmain=async()=>{// Rendering of lazy componentsconsthtml=awaitrenderToStringAsync(<Main/>);console.log(html);// <h1>Home page</h1>};// Execution & error handlingmain().catch((error)=>{console.error(error);});
About
📄 Universal rendering for Preact: render JSX and Preact components to HTML.
Topics
Resources
License
Code of conduct
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Sponsor this project
Uh oh!
There was an error while loading.Please reload this page.
Packages0
No packages published
Uh oh!
There was an error while loading.Please reload this page.