معرفی شرکت ها
preact-render-to-string-6.0.2
تبلیغات ما
مشتریان به طور فزاینده ای آنلاین هستند. تبلیغات می تواند به آنها کمک کند تا کسب و کار شما را پیدا کنند.
مشاهده بیشتر
تبلیغات ما
مشتریان به طور فزاینده ای آنلاین هستند. تبلیغات می تواند به آنها کمک کند تا کسب و کار شما را پیدا کنند.
مشاهده بیشتر
تبلیغات ما
مشتریان به طور فزاینده ای آنلاین هستند. تبلیغات می تواند به آنها کمک کند تا کسب و کار شما را پیدا کنند.
مشاهده بیشتر
تبلیغات ما
مشتریان به طور فزاینده ای آنلاین هستند. تبلیغات می تواند به آنها کمک کند تا کسب و کار شما را پیدا کنند.
مشاهده بیشتر
تبلیغات ما
مشتریان به طور فزاینده ای آنلاین هستند. تبلیغات می تواند به آنها کمک کند تا کسب و کار شما را پیدا کنند.
مشاهده بیشترتوضیحات
Render JSX to an HTML string, with support for Preact components.
| ویژگی | مقدار |
|---|---|
| سیستم عامل | - |
| نام فایل | preact-render-to-string-6.0.2 |
| نام | preact-render-to-string |
| نسخه کتابخانه | 6.0.2 |
| نگهدارنده | ['drewigg', 'reznord', 'preactjs', 'developit', 'lukeed', 'prateekbh', 'harmony', 'marvinhagemeister', 'solarliner', 'jdecroock', 'sventschui'] |
| ایمیل نگهدارنده | ['drewigg@gmail.com', 'allamsetty.anup@gmail.com', 'hello@preactjs.com', 'jason@developit.ca', 'luke@lukeed.com', 'prateek89born@gmail.com', 'npm.leah@hrmny.sh', 'hello@marvinh.dev', 'solarliner@gmail.com', 'decroockjovi@gmail.com', 'sventschui@gmail.com'] |
| نویسنده | Jason Miller |
| ایمیل نویسنده | jason@developit.ca |
| آدرس صفحه اصلی | git+https://github.com/developit/preact-render-to-string.git |
| آدرس اینترنتی | https://github.com/developit/preact-render-to-string |
| مجوز | MIT |
# 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 = <div class="foo">content</div>;
let html = render(vdom);
console.log(html);
// <div class="foo">content</div>
```
### 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 <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!
```js
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>`);
});
```
---
### `Suspense` & `lazy` components with [`preact/compat`](https://www.npmjs.com/package/preact) & [`preact-ssr-prepass`](https://www.npmjs.com/package/preact-ssr-prepass)
```bash
npm install preact preact-render-to-string preact-ssr-prepass
```
```jsx
export default () => {
return (
<h1>Home page</h1>
)
}
```
```jsx
import { Suspense, lazy } from "preact/compat"
// Creation of the lazy component
const HomePage = lazy(() => import("./pages/home"))
const Main = () => {
return (
<Suspense fallback={<p>Loading</p>}>
<HomePage />
</Suspense>
)
}
```
```jsx
import { render } from "preact-render-to-string"
import prepass from "preact-ssr-prepass"
import { Main } from "./main"
const main = async () => {
// Creation of the virtual DOM
const vdom = <Main />
// Pre-rendering of lazy components
await prepass(vdom)
// Rendering of components
const html = render(vdom)
console.log(html)
// <h1>Home page</h1>
}
// Execution & error handling
main().catch(error => {
console.error(error)
})
```
---
### License
[MIT](http://choosealicense.com/licenses/mit/)
نیازمندی
| مقدار | نام |
|---|---|
| ^3.8.0 | pretty-format |
زبان مورد نیاز
| مقدار | نام |
|---|---|
| 18.15.0 | Npm |
نحوه نصب
نصب پکیج tgz preact-render-to-string-6.0.2:
npm install preact-render-to-string-6.0.2.tgz