6.4.2 • Published 9 days ago

preact-render-to-string v6.4.2

Weekly downloads
170,967
License
MIT
Repository
github
Last release
9 days 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>`);
});

Error Boundaries

Rendering errors can be caught by Preact via getDerivedStateFromErrors or componentDidCatch. To enable that feature in preact-render-to-string set errorBoundaries = true

import { options } from 'preact';

// Enable error boundaries in `preact-render-to-string`
options.errorBoundaries = true;

Suspense & lazy components with preact/compat

npm install preact preact-render-to-string
export default () => {
	return <h1>Home page</h1>;
};
import { Suspense, lazy } from 'preact/compat';

// Creation of the lazy component
const HomePage = lazy(() => import('./pages/home'));

const Main = () => {
	return (
		<Suspense fallback={<p>Loading</p>}>
			<HomePage />
		</Suspense>
	);
};
import { renderToStringAsync } from 'preact-render-to-string';
import { Main } from './main';

const main = async () => {
	// Rendering of lazy components
	const html = await renderToStringAsync(<Main />);

	console.log(html);
	// <h1>Home page</h1>
};

// Execution & error handling
main().catch((error) => {
	console.error(error);
});

License

MIT

preactrenderuniversalisomorphic
pretty-format
@tossdev/lumo@storybook/addon-storyshotswidget-like-button-testpreactourreact-render-static-clilawyer-plugin2epub-jsxmicurai-pluginmicurai-plugin-demolawyer-plugin-eng@hyperspaceinc/next-authgatsby-theme-giornorygwebsteffowebpylot-frameworkpbkw5-htp@stym/memberships@puyodead1/next-auth@dirain/workflow-testkb-preact-compattesting-ci-ortsa-preact@everything-registry/sub-chunk-2468iris-messenger@andrewdw/calendar@astrojs/preact@astrojs/renderer-preactaptible-custom-helpcenter-search-testappnexus-cmp@answeroverflow/next-auth@aoeu/next-auth@axah/postie-web@a-morphous/wanderer-plugin-preact@a-cloud-guru/wc-app-switcher@a-cloud-guru/wc-app-switcher-banner@a-cloud-guru/wc-footer@4awpawz/fusion.ssg@adobe/gatsby-theme-aio@ampproject/storybook-addon@whiletruelove/next-auth@wincast/calendar@wcyat/pokemon-showdown@webscopeio/next-auth-fork@alexanderlee/next-auth@algolia/algolia-custom-helpcenter-search5htp-core@barelyhuman/prev@betterpt/clinic-telehealth-button@betterpt/leads-form-widget@auth-pp/core@auth/coreaureolinauth-apple-fix-coreauto-link-oauth-next-auth@byondrnd/byondxr-web-visualizer-ui@cgps/next-auth@bangdinhnpm/next-auth@bolt/uikit-workshop@capri-js/preactbarnes-preactbytevane-authbrazy-auth@coherence-finance/next-auth@codetheorist/next-auth@contember/cli@cond/preact-cliblog-theme-lemurcustom-gen9-pokemon-showdowndamienpm-next-authoc-template-preactonrender-next-authchene@digimuza/pdf-componentscoda-authcoda-auth-staticchidu-authentication-modulenashinext-auth-aunext-auth-danger-linknext-auth-lightning-providernext-auth-linkedin-fixnext-auth-override-redirectnext-auth-patch-feature-nonce-checknext-auth-preconysnext-auth-proxynext-auth-pubkeynext-auth-rasnext-auth-sescnext-auth-siwenext-auth-testnext-auth-with-exponext-auth-with-link-account-profilenext-auth-flagnext-auth-fork-bodyaalyas12next-auth-imrdjainext-auth-jwt-fixnextjs-preact-demo@carforyou/whitelabel-widget@binyamin/eleventy-preact@beyondrarity/instacheck-js-test
6.4.2

9 days ago

6.4.1

30 days ago

6.4.0

2 months ago

6.2.2

7 months ago

6.3.0

5 months ago

6.3.1

5 months ago

6.1.0

10 months ago

6.2.1

8 months ago

6.2.0

9 months ago

6.0.3

12 months ago

6.0.1

1 year ago

6.0.0

1 year ago

6.0.2

1 year ago

5.2.6

1 year ago

5.2.5

2 years ago

5.2.4

2 years ago

5.2.3

2 years ago

5.2.2

2 years ago

5.2.1

2 years ago

5.2.0

2 years ago

5.1.21

2 years ago

6.0.0-experimental.0

2 years ago

5.1.20

2 years ago

5.1.19

3 years ago

5.1.18

3 years ago

5.1.17

3 years ago

5.1.16

3 years ago

5.1.15

3 years ago

5.1.14

3 years ago

5.1.13

3 years ago

5.1.12

3 years ago

5.1.11

3 years ago

5.1.10

4 years ago

5.1.9

4 years ago

5.1.8

4 years ago

5.1.7

4 years ago

5.1.6

4 years ago

5.1.5

4 years ago

5.1.4

4 years ago

5.1.3

4 years ago

5.1.2

4 years ago

5.1.1

4 years ago

5.1.0

5 years ago

5.0.7

5 years ago

5.0.6

5 years ago

5.0.5

5 years ago

5.0.4

5 years ago

5.0.3

5 years ago

5.0.2

5 years ago

5.0.1

5 years ago

5.0.0

5 years ago

4.1.0

6 years ago

3.8.2

6 years ago

4.0.1

6 years ago

4.0.0

6 years ago

3.8.1

6 years ago

3.8.0

6 years ago

3.7.2

6 years ago

3.7.1

6 years ago

3.7.0

7 years ago

3.6.3

7 years ago

3.6.2

7 years ago

3.6.1

7 years ago

3.6.0

7 years ago

3.5.0

7 years ago

3.4.1

7 years ago

3.4.0

7 years ago

3.3.0

7 years ago

3.2.1

8 years ago

3.2.0

8 years ago

3.1.1

8 years ago

3.1.0

8 years ago

3.0.7

8 years ago

3.0.6

8 years ago

3.0.5

8 years ago

3.0.4

8 years ago

3.0.3

8 years ago

3.0.2

8 years ago

3.0.1

8 years ago

3.0.0

8 years ago

2.8.0

8 years ago

2.7.0

8 years ago

2.6.1

8 years ago

2.6.0

8 years ago

2.5.0

8 years ago

2.4.0

8 years ago

2.3.0

8 years ago

2.2.0

8 years ago

2.1.0

8 years ago

2.0.1

8 years ago

2.0.0

8 years ago

1.4.2

8 years ago

1.4.1

8 years ago

1.4.0

8 years ago

1.3.0

8 years ago

1.2.0

8 years ago

1.1.3

9 years ago

1.1.1

9 years ago

1.1.0

9 years ago

1.0.0

9 years ago