npmpackage.info

Gathering detailed insights and metrics for @yr/preact-render-to-string

@yr/preact-render-to-string

📄 Universal rendering for Preact: render JSX and Preact components to HTML.

4.0.2

MIT

JavaScript

1.97 kB

1,321

Installations

npm install @yr/preact-render-to-string

Developer 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

Maintenance

100

Vulnerability

99.6

License

Pull Requests

Open

0

Total

0

Closed

0

Issues

Open

0

Total

0

Closed

0

Releases

Unable to fetch releases

Contributors

Unable to fetch Contributors

View All 1 Contributors

Languages

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

Last Week

Last Month

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

Bundlephobia

Maintainers

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

Compared to previous day

Last Week

Compared to previous week

Last Month

-88.4%

Compared to previous month

Last Year

-0.9%

109

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

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

MIT

No vulnerabilities found.

No security vulnerabilities found.

@yr/preact-render-to-string

Installations

Developer Guide

No

CommonJS

8.5.0

5.4.1

Score

Pull Requests

0

0

0

Issues

0

0

0

Releases

Unable to fetch releases

Contributors

Unable to fetch Contributors

Languages

validate.email 🚀

Developer

Download Statistics

GitHub Statistics

Bundle Size

4.21 kB

1.97 kB

Maintainers

Package Meta Information

Total Downloads

1,321

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

preact-render-to-string

Render JSX/VDOM to HTML

Render Preact Components to HTML

Render JSX / Preact / Whatever via Express!

License