@react-hook/server-promises
v2.0.0
Published
A React hook for continuously rendering a React tree until no promises are pushed to server-promises's context in a given render.
Downloads
10
Maintainers
jaredlundeReadme
A React hook for continuously rendering a React tree until no promises
are pushed to server-promises's context in a given render.
Quick Start
import React from 'react'
import {renderToString} from 'react-dom/server'
import {useServerPromises, loadPromises} from '@react-hook/server-promises'
let LOADED = false
const App = (props) => {
const serverPromises = useServerPromises()
// adds a promise to the server promises cache
const response = useMemo(() => {
if (LOADED === false) {
LOADED = true
return serverPromises.push(fetch('https://github.com'))
}
}, [])
return <span>Status: {response.status}</span>
}
const ServerRenderer = async (props) => `
<html>
<body>
<div id='⚛️'>
${await loadPromises(<App />, renderToString)}
</div>
</body>
</html>
`API
useServerPromises()
A hook for adding promises to an array of promises you need rendered on the server
Returns ServerPromisesContextType
ServerPromisesContextType
export interface ServerPromisesContextType {
/**
* An array of promises that are still pending
*/
promises: Promise<any>[]
/**
* Adds a promise to the promises array
*/
push: (...args: Promise<any>[]) => number
/**
* Loads all of the promises currently in the promises array
*/
load: () => Promise<any>
}loadPromises(tree, render?, cache?)
Continuously re-renders the React tree until there are no promises pending
in a given render
| Argument | Type | Default | Required? | Description |
| -------- | ------------------------------------ | ------------------------------------- | --------- | ------------------------------------------------------ |
| tree | React.ReactElement | undefined | Yes | A React tree to render to string |
| render | (element: React.ReactElement) => T | ReactDOMServer.renderToStaticMarkup | No | A server renderer to continuously render the tree with |
Returns string
LICENSE
MIT