# hapi-render-react
> React rendering support for hapi.js
Latest version **2.5.2** (published 2018-03-20) · BSD-3-Clause license · 0 weekly downloads
## Install
```sh
npm install hapi-render-react
pnpm add hapi-render-react
yarn add hapi-render-react
bun add hapi-render-react
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 2.5.2 |
| Published | 2018-03-20 |
| First published | 2018-02-19 |
| Weekly downloads | 0 |
| License | BSD-3-Clause |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 68 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Sérgio Ramos |
| Maintainers | ramitos |
| Keywords | react, hapi, template, view |
## Links
- npm: https://www.npmjs.com/package/hapi-render-react
- Repository: https://github.com/ramitos/hapi-render-react
- Homepage: https://github.com/ramitos/hapi-render-react#readme
- Issues: https://github.com/ramitos/hapi-render-react/issues
- npm.io page: https://npm.io/package/hapi-render-react
## Dependencies (6)
- [mz](https://npm.io/package/mz.md) ^2.7.0
- [is-stream](https://npm.io/package/is-stream.md) ^1.1.0
- [get-stream](https://npm.io/package/get-stream.md) ^3.0.0
- [clear-module](https://npm.io/package/clear-module.md) ^2.1.0
- [p-is-promise](https://npm.io/package/p-is-promise.md) ^1.1.0
- [lodash.isstring](https://npm.io/package/lodash.isstring.md) ^4.0.1
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 2.5.2 (latest) — 2018-03-20
- 2.5.1 — 2018-03-19
- 2.5.0 — 2018-03-19
- 2.4.1 — 2018-03-18
- 2.4.0 — 2018-03-18
- 2.3.0 — 2018-03-17
- 2.2.0 — 2018-03-05
- 2.1.0 — 2018-02-20
- 2.0.0 — 2018-02-20
- 1.1.0 — 2018-02-19
- 1.0.1 — 2018-02-19
- 1.0.0 — 2018-02-19
## README
# hapi-render-react
[](https://www.npmjs.com/package/hapi-render-react)
[](https://opensource.org/licenses/BSD-3-Clause)
[](https://github.com/RichardLitt/standard-readme)
[](https://david-dm.org/ramitos/hapi-render-react)
[](https://david-dm.org/ramitos/hapi-render-react?type=dev)
[](https://david-dm.org/ramitos/hapi-render-react?type=peer)
## Table of Contents
* [Install](#install)
* [Usage](#usage)
* [\_document](#_document)
* [License](#license)
## Install
```
yarn add hapi-render-react
```
```
npm install hapi-render-react
```
## Usage
```js
const { Server } = require('hapi');
const Main = require('apr-main');
const RenderReact = require('hapi-render-react');
const Path = require('path');
const { PORT = 3001 } = process.env;
const server = new Server({
port: PORT
});
Main(async () => {
await server.register({
plugin: RenderReact,
options: {
relativeTo: Path.join(__dirname, 'views')
}
});
await server.initialize();
server.route({
method: 'GET',
path: '/',
handler: {
view: {
name: 'home',
dynamic: false, // true by default. if !dynamic, it generates an .html and always serves said file
props: {
hello: 'world'
}
}
}
});
server.route({
method: 'GET',
path: '/hello',
handler: (request, h) => {
return h.render('hello', { name: 'world' });
}
});
await server.start();
// eslint-disable-next-line no-console
console.log(`Server started at ${server.info.uri}`);
});
```
_pages/home.js_:
```js
import React from 'react';
export default ({ hello }) => Hello {hello}
;
```
_pages/hello.js_:
```js
import React from 'react';
export default ({ name }) => Hello {name}
;
```
## \_document
_inspired by [Next.js](https://github.com/zeit/next.js#custom-document)._
You can customize how a view is rendered. Example of a \__document_ to support React-Helmet:
```js
const React = require('react');
const { HelmetProvider } = require('react-helmet-async');
const { renderToString, renderToNodeStream } = require('react-dom/server');
module.exports = View => {
const helmetContext = {};
const appHtml = renderToString(
React.createElement(
HelmetProvider,
{ context: helmetContext },
React.createElement(View)
)
);
const { helmet } = helmetContext;
const {
bodyAttributes,
htmlAttributes,
link,
meta,
noscript,
script,
style,
title
} = helmet;
const htmlAttrs = htmlAttributes.toString();
const bodyAttrs = bodyAttributes.toString();
const bodyHtml = renderToString(
React.createElement(React.Fragment, null, [
link.toComponent(),
noscript.toComponent(),
style.toComponent(),
script.toComponent()
])
);
return renderToNodeStream(
React.createElement('html', htmlAttrs, [
React.createElement('head', null, [
meta.toComponent(),
title.toComponent()
]),
React.createElement(
'body',
Object.assign(bodyAttrs, {
dangerouslySetInnerHTML: {
__html: appHtml + bodyHtml
}
})
)
])
);
};
```
## License
BSD-3-Clause
---
_Source: https://npm.io/package/hapi-render-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._