Gathering detailed insights and metrics for @yr/preact-render-to-string
📄 Universal rendering for Preact: render JSX and Preact components to HTML.
Installations
npm install @yr/preact-render-to-stringDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
8.5.0
NPM Version
5.4.1
Score
73.5
Supply Chain
95.3
Quality
75
Maintenance
100
Vulnerability
99.6
License
Releases
Unable to fetch releases
Contributors
1
Unable to fetch Contributors
Languages
1
JavaScript
JavaScript (100%)
validate.email 🚀
Verify real, reachable, and deliverable emails with instant MX records, SMTP checks, and disposable email detection.
Developer
Download Statistics
Total Downloads
1,321
Last Day
1
Last Week
1
Last Month
5
Last Year
109
GitHub Statistics
MIT License
136 Commits
1 Watchers
6 Branches
1 Contributors
Updated on Jan 28, 2023
Bundle Size
4.21 kB
Minified
1.97 kB
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
4.0.2
Package Id
@yr/preact-render-to-string@4.0.2
Size
64.62 kB
NPM Version
5.4.1
Node Version
8.5.0
Total Downloads
Cumulative downloads
Total Downloads
1,321
Last Day
0%
1
Compared to previous day
Last Week
0%
1
Compared to previous week
Last Month
-88.4%
5
Compared to previous month
Last Year
-0.9%
109
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
Peer Dependencies
1
Dev Dependencies
20
preact-render-to-string
Render JSX and Preact 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
1import render from 'preact-render-to-string'; 2import { h } from 'preact'; 3/** @jsx h */ 4 5let vdom = <div class="foo">content</div>; 6 7let html = render(vdom); 8console.log(html); 9// <div class="foo">content</div>
Render Preact Components to HTML
1import render from 'preact-render-to-string'; 2import { h, Component } from 'preact'; 3/** @jsx h */ 4 5// Classical components work 6class Fox extends Component { 7 render({ name }) { 8 return <span class="fox">{ name }</span>; 9 } 10} 11 12// ... and so do pure functional components: 13const Box = ({ type, children }) => ( 14 <div class={`box box-${type}`}>{ children }</div> 15); 16 17let html = render( 18 <Box type="open"> 19 <Fox name="Finn" /> 20 </Box> 21); 22 23console.log(html); 24// <div class="box box-open"><span class="fox">Finn</span></div>
Render JSX / Preact / Whatever via Express!
1import express from 'express'; 2import { h } from 'preact'; 3import render from 'preact-render-to-string'; 4/** @jsx h */ 5 6// silly example component: 7const Fox = ({ name }) => ( 8 <div class="fox"> 9 <h5>{ name }</h5> 10 <p>This page is all about {name}.</p> 11 </div> 12); 13 14// basic HTTP server via express: 15const app = express(); 16app.listen(8080); 17 18// on each request, render and return a component: 19app.get('/:fox', (req, res) => { 20 let html = render(<Fox name={req.params.fox} />); 21 // send it back wrapped up as an HTML5 document: 22 res.send(`<!DOCTYPE html><html><body>${html}</body></html>`); 23});
License
No vulnerabilities found.
No security vulnerabilities found.