Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/preactjs/preact-render-to-string
📄 Universal rendering for Preact: render JSX and Preact components to HTML.
https://github.com/preactjs/preact-render-to-string
html preact preact-components universal
Last synced: 4 days ago
JSON representation
📄 Universal rendering for Preact: render JSX and Preact components to HTML.
- Host: GitHub
- URL: https://github.com/preactjs/preact-render-to-string
- Owner: preactjs
- License: mit
- Created: 2015-10-17T21:12:30.000Z (over 9 years ago)
- Default Branch: main
- Last Pushed: 2024-10-20T21:07:16.000Z (3 months ago)
- Last Synced: 2024-10-29T14:55:34.504Z (3 months ago)
- Topics: html, preact, preact-components, universal
- Language: JavaScript
- Homepage: http://npm.im/preact-render-to-string
- Size: 1.43 MB
- Stars: 650
- Watchers: 10
- Forks: 93
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-preact - Preact Render To String - Universal rendering. (Uncategorized / Uncategorized)
- awesome-node-esm - preact-render-to-string - universal rendering for Preact: render JSX and Preact components to HTML. (Packages / SSR)
README
# preact-render-to-string
[](https://www.npmjs.com/package/preact-render-to-string)
[](https://github.com/preactjs/preact-render-to-string/actions/workflows/ci.yml)
Render JSX and [Preact](https://github.com/preactjs/preact) components to an HTML string.
Works in Node & the browser, making it useful for universal/isomorphic rendering.
\>\> **[Cute Fox-Related Demo](http://codepen.io/developit/pen/dYZqjE?editors=001)** _(@ CodePen)_ <<
---
### Render JSX/VDOM to HTML
```js
import { render } from 'preact-render-to-string';
import { h } from 'preact';
/** @jsx h */
let vdom =
content;
let html = render(vdom);
console.log(html);
//
content
```
### Render Preact Components to HTML
```js
import { render } from 'preact-render-to-string';
import { h, Component } from 'preact';
/** @jsx h */
// Classical components work
class Fox extends Component {
render({ name }) {
return {name};
}
}
// ... and so do pure functional components:
const Box = ({ type, children }) => (
{children}
);
let html = render(
);
console.log(html);
//
Finn
```
---
### Render JSX / Preact / Whatever via Express!
```js
import express from 'express';
import { h } from 'preact';
import { render } from 'preact-render-to-string';
/** @jsx h */
// silly example component:
const Fox = ({ name }) => (
{name}
This page is all about {name}.
);
// 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();
// send it back wrapped up as an HTML5 document:
res.send(`${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`
```js
import { options } from 'preact';
// Enable error boundaries in `preact-render-to-string`
options.errorBoundaries = true;
```
---
### `Suspense` & `lazy` components with [`preact/compat`](https://www.npmjs.com/package/preact)
```bash
npm install preact preact-render-to-string
```
```jsx
export default () => {
return
Home page
;
};
```
```jsx
import { Suspense, lazy } from 'preact/compat';
// Creation of the lazy component
const HomePage = lazy(() => import('./pages/home'));
const Main = () => {
return (
Loading}>
);
};
```
```jsx
import { renderToStringAsync } from 'preact-render-to-string';
import { Main } from './main';
const main = async () => {
// Rendering of lazy components
const html = await renderToStringAsync();
console.log(html);
//
Home page
};
// Execution & error handling
main().catch((error) => {
console.error(error);
});
```
---
### License
[MIT](http://choosealicense.com/licenses/mit/)