Nanoscale Parts Manufacturing
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    preact-render-to-stringpublic

    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

    29,154

    version

    3.7.0

    license

    MIT

    repository

    githubgithub

    last publish

    collaborators

    • avatar