koa2-react-view
v1.1.0
Published
React view engine for Koa 2
Downloads
4
Readme
koa2-react-view
React SSR with Koa 2
Installation
With NPM
npm install koa2-react-viewOr with Yarn
yarn add koa2-react-viewUsage
Server file
const Koa = require('koa')
const render = require('koa2-react-view')
/* Or
import Koa from 'koa'
import { render } from 'koa2-react-view'
*/
const app = new Koa()
// Register middleware
app.use(
render({
root: path.join(__dirname, 'views'),
ext: 'jsx',
cache: false,
layout: 'Layout',
})
)
// Use ctx.render to render a view with variables
app.use(async (ctx) => {
return ctx.render('home', { name: 'World' })
})
app.listen(3000)View file
import React from 'react'
// Views (as well as layout) should always be default exported
export default function Home({ name }) {
return <div>Hello {name}!</div>
}Variables
Are available in the view:
- all the variables defined during
ctx.renderprocess ctx.state, through the__stateprop
Options
| name | type | mandatory | default value | description |
| ------ | ------- | --------- | ------------- | ----------------------------------------------------------------------------------------------- |
| root | string | yes | | root folder of the views |
| ext | string | no | jsx | extension of the view (with or without a .) |
| cache | boolean | no | true | should the views be cached or not (recommended: true for production, false for development) |
| layout | string | no | | filename of the layout component views |
Using a layout
You can use a layout to wrap your views. All variables available in the view are available in the layout.
import React from 'react'
export default function Layout({ children }) {
return (
<html>
<head></head>
{/* Bellow is your view */}
<body>{children}</body>
</html>
)
}