5.2.0 • Published 2 months ago

preact-render-to-string v5.2.0

Weekly downloads
170,967
License
MIT
Repository
github
Last release
2 months ago

preact-render-to-string

NPM Build status

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

import render from 'preact-render-to-string';
import { h } from 'preact';
/** @jsx h */

let vdom = <div class="foo">content</div>;

let html = render(vdom);
console.log(html);
// <div class="foo">content</div>

Render Preact Components to HTML

import render from 'preact-render-to-string';
import { h, Component } from 'preact';
/** @jsx h */

// Classical components work
class Fox extends Component {
	render({ name }) {
		return <span class="fox">{ name }</span>;
	}
}

// ... and so do pure functional components:
const Box = ({ type, children }) => (
	<div class={`box box-${type}`}>{ children }</div>
);

let html = render(
	<Box type="open">
		<Fox name="Finn" />
	</Box>
);

console.log(html);
// <div class="box box-open"><span class="fox">Finn</span></div>

Render JSX / Preact / Whatever via Express!

import express from 'express';
import { h } from 'preact';
import render from 'preact-render-to-string';
/** @jsx h */

// silly example component:
const Fox = ({ name }) => (
	<div class="fox">
		<h5>{ name }</h5>
		<p>This page is all about {name}.</p>
	</div>
);

// basic HTTP server via express:
const app = express();
app.listen(8080);

// on each request, render and return a component:
app.get('/:fox', (req, res) => {
	let html = render(<Fox name={req.params.fox} />);
	// send it back wrapped up as an HTML5 document:
	res.send(`<!DOCTYPE html><html><body>${html}</body></html>`);
});

License

MIT

preactrenderuniversalisomorphic
pretty-format
widget-like-button-testpreactourreact-render-static-clilawyer-plugin2epub-jsxmicurai-pluginmicurai-plugin-demolawyer-plugin-eng@hyperspaceinc/next-authgatsby-theme-giorno@webscopeio/next-auth-fork@whiletruelove/next-auth@whitetrefoil/jest-look-like-matcher@zelphir/next-auth@zhuangya/next-auth@wyvernzora/epub-jsx@zrrrzzt/next-auth@yr/componentrygwebsteffowebreshape-preact-componentsexpress-preact-viewsfeature-app-pluginhapi-preact-viewsiris-messengerhypernova-preacthybriq-questionnaire-pluginimagineui-cligknext-authgatsby-core-themegatsby-starter-try-ghostgatsby-starter-github-portfoliolive-report-storybooklawyer-pluginkobe-preact-compatloyagramesm-ui-library-gatsbykloilibchecklike-button-widget@quarterto/preact-render-array-to-stringmicrositemugglekb-preact-compatjsx-pistolsmnaosmnaomhymhydmkb-preact-compatpreact-head-tagpreact-jsx-chaipreact-jsx-chai-matchpreact-jsx-chai-match-templatepreactx-bootstrappreact-layoutpreact-f7preact-promise-ssrpreact-render-spypreact-render-spy-forkpreact-assert-equal-jsxpreact-cli-omipreapreact-compatpreact-compat-algoliapreact-compat-blahpre-benefits-adminpylot-frameworkquodrax-react-compatrazzle-examples-preactrazzle-examples-with-preactpclcpbkwpc-swiperpc-transitiononrender-next-authnowtv-global-navpillarjspinvpogo-clireact-lite-builderreshape-preact-ssrroochrollup-plugin-netlify-optimizesgpl-statementsnext-authnext-auth-aunext-auth-danger-linknext-auth-flagnext-auth-override-redirectnext-auth-proxynext-auth-rasnext-auth-with-link-account-profilenextjs-preact-demosportsbet-apollosportsbet-promotions-appsportsbet-user-appstarter-nextjsstorybook-preact-chromatic
5.2.0

2 months ago

5.1.21

3 months ago

6.0.0-experimental.0

4 months ago

5.1.20

4 months ago

5.1.19

1 year ago

5.1.18

1 year ago

5.1.17

1 year ago

5.1.16

1 year ago

5.1.15

1 year ago

5.1.14

1 year ago

5.1.13

1 year ago

5.1.12

2 years ago

5.1.11

2 years ago

5.1.10

2 years ago

5.1.9

2 years ago

5.1.8

2 years ago

5.1.7

2 years ago

5.1.6

2 years ago

5.1.5

2 years ago

5.1.4

2 years ago

5.1.3

3 years ago

5.1.2

3 years ago

5.1.1

3 years ago

5.1.0

3 years ago

5.0.7

3 years ago

5.0.6

3 years ago

5.0.5

3 years ago

5.0.4

3 years ago

5.0.3

3 years ago

5.0.2

3 years ago

5.0.1

3 years ago

5.0.0

3 years ago

4.1.0

4 years ago

3.8.2

4 years ago

4.0.1

4 years ago

4.0.0

4 years ago

3.8.1

4 years ago

3.8.0

4 years ago

3.7.2

4 years ago

3.7.1

4 years ago

3.7.0

5 years ago

3.6.3

5 years ago

3.6.2

5 years ago

3.6.1

5 years ago

3.6.0

5 years ago

3.5.0

5 years ago

3.4.1

5 years ago

3.4.0

5 years ago

3.3.0

6 years ago

3.2.1

6 years ago

3.2.0

6 years ago

3.1.1

6 years ago

3.1.0

6 years ago

3.0.7

6 years ago

3.0.6

6 years ago

3.0.5

6 years ago

3.0.4

6 years ago

3.0.3

6 years ago

3.0.2

6 years ago

3.0.1

6 years ago

3.0.0

6 years ago

2.8.0

6 years ago

2.7.0

6 years ago

2.6.1

6 years ago

2.6.0

6 years ago

2.5.0

6 years ago

2.4.0

6 years ago

2.3.0

6 years ago

2.2.0

6 years ago

2.1.0

6 years ago

2.0.1

6 years ago

2.0.0

6 years ago

1.4.2

6 years ago

1.4.1

7 years ago

1.4.0

7 years ago

1.3.0

7 years ago

1.2.0

7 years ago

1.1.3

7 years ago

1.1.1

7 years ago

1.1.0

7 years ago

1.0.0

7 years ago