# @saus/react
> React renderer for saus
Latest version **0.4.9** (published 2021-10-16) · MIT license · 0 weekly downloads
## Install
```sh
npm install @saus/react
pnpm add @saus/react
yarn add @saus/react
bun add @saus/react
```
## Health
**Score 20/100 (F)** — status: abandoned.
Positive: has types; no vulnerabilities.
Warnings: low downloads; no esm support; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.4.9 |
| Published | 2021-10-16 |
| First published | 2021-10-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 32 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | aleclarson |
## Links
- npm: https://www.npmjs.com/package/@saus/react
- npm.io page: https://npm.io/package/@saus/react
## Dependencies (2)
- [@types/babel__core](https://npm.io/package/@types/babel__core.md) ^7.1.16
- [@vitejs/plugin-react](https://npm.io/package/@vitejs/plugin-react.md) ^1.0.1
## Recent versions
- 0.4.9 (latest) — 2021-10-16
- 0.4.8 — 2021-10-16
- 0.4.0 — 2021-10-09
- 0.3.1 — 2021-10-08
- 0.3.0 — 2021-10-07
- 0.2.2 — 2021-10-05
- 0.2.1 — 2021-10-05
- 0.2.0 — 2021-10-05
- 0.1.1 — 2021-10-04
- 0.1.0 — 2021-10-03
## README
# @saus/react
Pre-render your pages with React and `@saus/react` will generate the module that hydrates your page on the client-side. Use JSX to render your `` and `` tags. Use the automatic JSX runtime and Fast Refresh.
Start by importing the `render` function in your project's `src/render.tsx` module (or whichever module you set `render` to in your `saus.yaml` file).
```ts
import { render } from '@saus/react'
```
Use it to define the default renderer. It receives the loaded module from the page's matching route. You can export whatever you like, but in this example, we're setting the `default` export to a React component, which represents the page content.
```ts
import { render } from '@saus/react'
import React from 'react'
render(module => {
const Page = module.default as React.ComponentType
return
})
```
### Route parameters
If you're using route parameters, you'll want to pass those into your `Page` component.
```ts
import { render } from '@saus/react'
import React from 'react'
render((module, { params }) => {
const Page = module.default as React.ComponentType
return
})
```
### Routed rendering
If a certain route needs its own logic, one option is to give it a dedicated renderer.
```ts
render('/books/:book', (module, { params }) => {
return {params.book}
})
```
### Isomorphic rendering
It's important to remember that your renderer will run in both Node and web environments, so you need to be conscious about keeping your code compatible with both.
The one exception to that rule is when a variable is only used for rendering the optional `` element. Any code used in `` and not in `` will be tree-shaked while generating the client renderer.
## Limitations
To reduce code complexity in the client generator, your render functions have the following limitations.
**Keep `` and `` elements within `` subtree.**
For the ``-only logic to be tree-shaked, it can't be "lifted" out of the `` subtree.
```tsx
// Bad
const Head = () => (
{...}
)
return (
)
// Good
return (