6.4.2 • Published 2 months ago

preact-render-to-string v6.4.2

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>`);
});

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-messengergknext-authkobe-preact-compatjsx-pistolskloilibchecklawyer-pluginloyagramlike-button-widgetlive-report-storybookhapi-preact-viewsinsiwhybriq-questionnaire-pluginisoqislandyhypernova-preactimagineui-climnaomnaosmicrositemhymhydmkb-preact-compatmugglenext-auth-pubkeynext-auth-rasnext-auth-sescnext-auth-siwenext-auth-with-exponext-auth-with-link-account-profilenext-auth-testnextjs-preact-demonice-avatar-svgnext-auth-proxynashinext-auth-aunext-auth-danger-linknext-auth-flagnext-auth-fork-bodyaalyas12next-auth-imrdjainext-auth-jwt-fixnext-auth-lightning-providernext-auth-linkedin-fixnext-auth-override-redirectnext-auth-patch-feature-nonce-checknext-auth-preconysmoxieauth-corenitro-preact-islands@rules_prerender/preact@saphrax/cli@sector/toast@stormid/umbraco-library@stouder-io/inertia-preact@stevesouth/next-auth@paragraval/preact-render-spy@pixel-point/next-auth@polyup/tutorials@thewilloftheshadow/next-auth-fork@tlgr/fmt@toast-ui/calendar@tiplink/next-auth@tru_id/next-auth@tunaayberk/auth-custom-test@stringke/next-auth@supergrowthai/next-blog@tawashy/na-multi-tenant@rowanmanning/fastify-htm-preact-views@rschristian/astro-preact-twind@quarterto/preact-render-array-to-string@sonikjs/preact@smithmilner/next-auth@robert-op/next-auth@simonsoft/cds-components@sisig/runtime@silasak/next-auth@sihaxito/nextauth@recodable/like-button-widget
6.4.2

2 months ago

6.4.1

3 months ago

6.4.0

4 months ago

6.2.2

9 months ago

6.3.0

7 months ago

6.3.1

7 months ago

6.1.0

1 year ago

6.2.1

10 months ago

6.2.0

11 months ago

6.0.3

1 year ago

6.0.1

1 year ago

6.0.0

1 year ago

6.0.2

1 year ago

5.2.6

2 years 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

4 years ago

5.1.11

4 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

5 years ago

5.1.1

5 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

8 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

9 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