Nondeterministic Polynomial Munchies
    Have ideas to improve npm?Join in the discussion! »

    preact-render-to-string
    TypeScript icon, indicating that this package has built-in type declarations

    5.1.19 • Public • Published

    preact-render-to-string

    NPM travis-ci

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

    License

    MIT

    Install

    npm i preact-render-to-string

    DownloadsWeekly Downloads

    155,394

    Version

    5.1.19

    License

    MIT

    Unpacked Size

    253 kB

    Total Files

    31

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar