npmpackage.info

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

@yr/preact-render-to-string - 4.0.2 | npmpackage.info

@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,356

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 Pull Requests

Open

0

Total

0

Closed

0

Issues

Open

0

Total

0

Closed

0

Releases

Unable to fetch releases

Languages

JavaScript

JavaScript (100%)

Developer

Download Statistics

Total Downloads

1,356

Last Day

Last Week

Last Month

Last Year

137

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

View All 1 Contributors

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,356

Last Day

Compared to previous day

Last Week

-14.3%

Compared to previous week

Last Month

-28.6%

Compared to previous month

Last Year

35.6%

137

Compared to previous year

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.

npmpackage.info

@yr/preact-render-to-string

Installations

Developer Guide

No

CommonJS

8.5.0

5.4.1

Pull Requests

0

0

0

Issues

0

0

0

Releases

Unable to fetch releases

Languages

Developer

Download Statistics

GitHub Statistics

Bundle Size

4.21 kB

1.97 kB

Maintainers

Package Meta Information

Total Downloads

1,356

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