Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pmndrs/react-nil
⃝ A react null renderer
https://github.com/pmndrs/react-nil
fiber node null react renderer
Last synced: 5 days ago
JSON representation
⃝ A react null renderer
- Host: GitHub
- URL: https://github.com/pmndrs/react-nil
- Owner: pmndrs
- License: mit
- Created: 2020-09-15T19:53:38.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2024-05-15T19:31:20.000Z (7 months ago)
- Last Synced: 2024-10-29T15:32:10.518Z (about 1 month ago)
- Topics: fiber, node, null, react, renderer
- Language: TypeScript
- Homepage:
- Size: 333 KB
- Stars: 795
- Watchers: 10
- Forks: 14
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-cn - react-nil - A react null renderer (Uncategorized / Uncategorized)
- awesome-learning-resources - react-nil - A react null renderer (Uncategorized / Uncategorized)
- awesome-list - react-nil
- awesome-react - react-nil - ⃝ A react null renderer ` 📝 8 months ago` (React [🔝](#readme))
README
[![Size](https://img.shields.io/bundlephobia/minzip/react-nil?label=gzip&style=flat&colorA=000000&colorB=000000)](https://bundlephobia.com/package/react-nil)
[![Version](https://img.shields.io/npm/v/react-nil?style=flat&colorA=000000&colorB=000000)](https://npmjs.com/package/react-nil)
[![Downloads](https://img.shields.io/npm/dt/react-nil.svg?style=flat&colorA=000000&colorB=000000)](https://npmjs.com/package/react-nil)
[![Twitter](https://img.shields.io/twitter/follow/pmndrs?label=%40pmndrs&style=flat&colorA=000000&colorB=000000&logo=twitter&logoColor=000000)](https://twitter.com/pmndrs)
[![Discord](https://img.shields.io/discord/740090768164651008?style=flat&colorA=000000&colorB=000000&label=discord&logo=discord&logoColor=000000)](https://discord.gg/poimandres)#### Nothing to see here ...
Quite so. This package allows you to bring React's high-level component abstraction to Node or wherever you need it. Why not manage your REST endpoints like routes on the client, users as components with mount/unmount lifecycles, self-contained separation of concern, and clean side effects? Suspense for requests, etc.
You can try a small demo here: https://codesandbox.io/s/react-nil-mvpry
#### How does it work?
The following renders a logical component without a view, it renders nothing, but it has a real lifecycle and is managed by React regardless.
```jsx
import * as React from 'react'
import { render } from 'react-nil'function Foo() {
const [active, set] = React.useState(false)
React.useEffect(() => void setInterval(() => set((a) => !a), 1000), [])// false, true, ...
console.log(active)
}render()
```We can take this further by rendering made-up elements that get returned as a reactive JSON tree from `render`.
You can take a snapshot for testing via `act` which will wait for effects and suspense to finish.
```jsx
import * as React from 'react'
import { act, render } from 'react-nil'function Test(props) {
const [value, setValue] = React.useState(-1)
React.useEffect(() => setValue(Date.now()), [])
return
}const container = await act(async () => render())
// { type: 'timestamp', props: { value: number }, children: [] }
console.log(container.head)
```