6.5.13 • Published 5 months ago

preact-render-to-string v6.5.13

Weekly downloads
170,967
License
MIT
Repository
github
Last release
5 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

5 months ago

6.5.12

6 months ago

6.5.11

9 months ago

6.5.10

10 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

11 months ago

6.5.5

1 year ago

6.5.8

10 months ago

6.5.7

11 months ago

6.5.9

10 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

5 years ago

5.1.3

5 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

8 years ago

3.4.1

8 years ago

3.4.0

8 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

9 years ago

1.4.2

9 years ago

1.4.1

9 years ago

1.4.0

9 years ago

1.3.0

9 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