Security News
Supply Chain Attack Detected in Solana's web3.js Library
A supply chain attack has been detected in versions 1.95.6 and 1.95.7 of the popular @solana/web3.js library.
By Sarah Gooding - Dec 03, 2024
Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
preact-render-to-string
Advanced tools
preact-render-to-string
Render JSX to an HTML string, with support for Preact components.
What is preact-render-to-string?
The preact-render-to-string package is used to render Preact components to HTML strings, which can be used for server-side rendering (SSR), generating static pages, or even testing components by comparing the output string. It is specifically designed for use with the Preact library, which is a fast 3kB alternative to React with the same modern API.
What are preact-render-to-string's main functionalities?
Render Preact components to HTML
This feature allows you to render a Preact component to an HTML string. It is useful for server-side rendering to send the initial HTML to the browser.
import { h } from 'preact';
import renderToString from 'preact-render-to-string';
const MyComponent = () => <div>Hello, World!</div>;
const html = renderToString(<MyComponent />);
console.log(html); // Outputs: <div>Hello, World!</div>Render with JSX
You can use JSX syntax to define the components that you want to render to a string, making it easy to write and understand.
import { h } from 'preact';
import renderToString from 'preact-render-to-string';
const html = renderToString(<div className='example'>Example</div>);
console.log(html); // Outputs: <div class="example">Example</div>Render with options
The package allows you to pass options to the render function, such as 'pretty' for pretty-printed HTML output.
import { h } from 'preact';
import renderToString from 'preact-render-to-string';
const MyComponent = () => <div>Hello, World!</div>;
const html = renderToString(<MyComponent />, { pretty: true });
console.log(html); // Outputs HTML with nice formattingOther packages similar to preact-render-to-string
vue-server-renderer
This package is used for server-side rendering of Vue.js applications. It turns Vue components into HTML strings, similar to what preact-render-to-string does for Preact components. It is tailored to the Vue.js framework and integrates with its reactivity system.
inferno-server
Inferno-server provides methods for server-side rendering of Inferno components. Inferno is another React-like library for building high-performance user interfaces, and inferno-server offers similar functionalities to preact-render-to-string for the Inferno ecosystem.
preact-render-to-string
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
Keywords
FAQs
Render JSX to an HTML string, with support for Preact components.
The npm package preact-render-to-string receives a total of 1,391,840 weekly downloads. As such, preact-render-to-string popularity was classified as popular.
We found that preact-render-to-string demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Package last updated on 17 Aug 2018
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Research
Security News
Malicious npm Package Targets Solana Developers and Hijacks Funds
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
By Socket Research Team - Dec 02, 2024
Security News
Research
Typosquatting Cryptographic Libraries: Malicious npm Packages Threaten Crypto Developers with Keylogging and Wallet Theft
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
By Kirill Boychenko - Nov 27, 2024