6.5.13 • Published 7 months ago

preact-render-to-string v6.5.13

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

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
@tossdev/lumowidget-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-messengersvgtilerwl-preact-cliwilsonweb-app-toolsteapubstarter-nextjssportsbet-apollosportsbet-promotions-appsportsbet-user-appstorybook-addon-ampstorybook-preact-chromatictest13456svelte-preact-snippetswitzerlandveef@dixid/front-server@cond/preact-cli@dan-ui/calendar@byondrnd/byondxr-web-visualizer-ui@bolt/uikit-workshop@rowanmanning/fastify-htm-preact-views@rschristian/astro-preact-twind@paypal/smart-payment-buttons@paypal/smart-payment-buttons-pre-release@paypal/smart-payment-buttons-prelease@paypal/smart-payment-buttons-prerelease@paypal/smart-payment-buttons-rerelease@pepsryuu-dev/preact-render-spy@perseveranza-pets/freya@rules_prerender/preactislandyjsx-pistolsisoqkatalyx-quizkloilawyer-pluginpaperflow@audio-intakes/editor@dennishellernokia/next-authnext-auth-modifiedresrouteskedush-blog-teapokemon-showdownspike-preact-ssrsosseug_babiterms-reporttoasttoastrstoast-ui-modified-calendartoosimpletui-calendar-angular@aoeu/next-auth@andrewdw/calendar@answeroverflow/next-auth@ampproject/storybook-addon@anish13/slidercomponent@astrojs/preact@astrojs/renderer-preact@auth-pp/core@auth/core@atomicbi/wildly-client@adobe/gatsby-theme-aio@algolia/algolia-custom-helpcenter-search@alexanderlee/next-auth@axah/postie-web@bangdinhnpm/next-auth@barelyhuman/prev@binyamin/eleventy-preact@beyondrarity/instacheck-js-test@betterpt/clinic-telehealth-button@betterpt/leads-form-widget@carforyou/whitelabel-widget@classportal/template@cgps/next-auth@4awpawz/fusion.ssg5htp-core
6.5.13

7 months ago

6.5.12

8 months ago

6.5.11

11 months ago

6.5.10

12 months ago

6.5.0

1 year ago

6.5.2

1 year ago

6.5.1

1 year ago

6.5.4

1 year ago

6.5.3

1 year ago

6.5.6

1 year ago

6.5.5

1 year ago

6.5.8

1 year ago

6.5.7

1 year ago

6.5.9

12 months ago

6.4.2

1 year ago

6.4.1

1 year ago

6.4.0

1 year ago

6.2.2

2 years ago

6.3.0

2 years ago

6.3.1

2 years ago

6.1.0

2 years ago

6.2.1

2 years ago

6.2.0

2 years ago

6.0.3

2 years ago

6.0.1

2 years ago

6.0.0

2 years ago

6.0.2

2 years ago

5.2.6

3 years ago

5.2.5

3 years ago

5.2.4

3 years ago

5.2.3

3 years ago

5.2.2

3 years ago

5.2.1

3 years ago

5.2.0

3 years ago

5.1.21

3 years ago

6.0.0-experimental.0

3 years ago

5.1.20

3 years ago

5.1.19

4 years ago

5.1.18

4 years ago

5.1.17

4 years ago

5.1.16

4 years ago

5.1.15

4 years ago

5.1.14

4 years ago

5.1.13

4 years ago

5.1.12

5 years ago

5.1.11

5 years ago

5.1.10

5 years ago

5.1.9

5 years ago

5.1.8

5 years ago

5.1.7

5 years ago

5.1.6

5 years ago

5.1.5

5 years ago

5.1.4

6 years ago

5.1.3

6 years ago

5.1.2

6 years ago

5.1.1

6 years ago

5.1.0

6 years ago

5.0.7

6 years ago

5.0.6

6 years ago

5.0.5

6 years ago

5.0.4

6 years ago

5.0.3

6 years ago

5.0.2

6 years ago

5.0.1

6 years ago

5.0.0

6 years ago

4.1.0

7 years ago

3.8.2

7 years ago

4.0.1

7 years ago

4.0.0

7 years ago

3.8.1

7 years ago

3.8.0

7 years ago

3.7.2

7 years ago

3.7.1

7 years ago

3.7.0

8 years ago

3.6.3

8 years ago

3.6.2

8 years ago

3.6.1

8 years ago

3.6.0

8 years ago

3.5.0

9 years ago

3.4.1

9 years ago

3.4.0

9 years ago

3.3.0

9 years ago

3.2.1

9 years ago

3.2.0

9 years ago

3.1.1

9 years ago

3.1.0

9 years ago

3.0.7

9 years ago

3.0.6

9 years ago

3.0.5

9 years ago

3.0.4

9 years ago

3.0.3

9 years ago

3.0.2

9 years ago

3.0.1

9 years ago

3.0.0

9 years ago

2.8.0

9 years ago

2.7.0

9 years ago

2.6.1

9 years ago

2.6.0

9 years ago

2.5.0

9 years ago

2.4.0

9 years ago

2.3.0

9 years ago

2.2.0

9 years ago

2.1.0

9 years ago

2.0.1

9 years ago

2.0.0

10 years ago

1.4.2

10 years ago

1.4.1

10 years ago

1.4.0

10 years ago

1.3.0

10 years ago

1.2.0

10 years ago

1.1.3

10 years ago

1.1.1

10 years ago

1.1.0

10 years ago

1.0.0

10 years ago