preactjs / Preact Render To String
Licence: mit
📄 Universal rendering for Preact: render JSX and Preact components to HTML.
Stars: ✭ 411
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Preact Render To String
Nanocomponent Adapters
🔌 - Convert a nanocomponent to a component for your favourite API or library (web components, (p)react, angular)
Stars: ✭ 94 (-77.13%)
Mutual labels: universal, preact
Electrode
Web applications with node.js and React
Stars: ✭ 2,033 (+394.65%)
Mutual labels: universal, preact
Razzle
✨ Create server-rendered universal JavaScript applications with no configuration
Stars: ✭ 10,547 (+2466.18%)
Mutual labels: universal, preact
universal-progressive-todos
A Todo list with universal JavaScript & Progressive Enhancement
Stars: ✭ 30 (-92.7%)
Mutual labels: preact, universal
Isomorphic Webpack
Abstracts universal consumption of application code base using webpack.
Stars: ✭ 294 (-28.47%)
Mutual labels: universal
Racket
A complete starting app for developing universal React/Redux web apps with generators, best practices and more
Stars: ✭ 290 (-29.44%)
Mutual labels: universal
Esri Loader
A tiny library to help load ArcGIS API for JavaScript modules in non-Dojo applications
Stars: ✭ 400 (-2.68%)
Mutual labels: preact
Wmr
👩🚀 The tiny all-in-one development tool for modern web apps.
Stars: ✭ 4,372 (+963.75%)
Mutual labels: preact
React Native Responsive Grid
Bringing the Web's Responsive Design to React Native
Stars: ✭ 369 (-10.22%)
Mutual labels: universal
React Storefront
React Storefront - PWA for eCommerce. 100% offline, platform agnostic, headless, Magento 2 supported. Always Open Source, Apache-2.0 license. Join us as contributor ([email protected]).
Stars: ✭ 292 (-28.95%)
Mutual labels: preact
Preact Starter
Webpack3 boilerplate for building SPA / PWA / offline front-end apps with Preact
Stars: ✭ 384 (-6.57%)
Mutual labels: preact
Jackblog React
Jackblog react 版, 个人博客系统, 使用服务端渲染(Universal / Isomorphic), react, redux, react-router, react-bootstrap, immutablejs, redux-form等
Stars: ✭ 292 (-28.95%)
Mutual labels: universal
Ngx Meta
Dynamic page title & meta tags utility for Angular (w/server-side rendering)
Stars: ✭ 331 (-19.46%)
Mutual labels: universal
Judo Heroes
A React application to showcase rendering with Universal JavaScript
Stars: ✭ 373 (-9.25%)
Mutual labels: universal
Relate
[ARCHIVED] experimenting React + GraphQL + Next.js web app on the theme of mindfulness
Stars: ✭ 324 (-21.17%)
Mutual labels: universal
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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].