react-async-bootstrapper2
v2.1.2
Published
Execute a bootstrap method on your React/Preact components. Useful for data prefetching and other activities.
Downloads
3
Readme
react-async-bootstrapper 👢
Execute a bootstrap
method on your React/Preact components. Useful for data prefetching and other activities.
TOCs
Introduction
This library is a simple implementation of react-tree-walker
, allowing you to attach a bootstrap
method to your React/Preact "class" components. I would highly recommend you review react-tree-walkers
documentation so as to gain more familiarity with what is being wrapped up by react-bootstrapper
.
I have created this implementation that responds to a bootstrap
method to allow me to have a standard implementation that would allow for interop between multiple packages requiring a bootstrapping process. For example I have create react-async-component
which provides code splitting support, and react-jobs
which enables data fetching. Both packages use this library to allow for a single bootstrapping parse satisfying the needs of both.
Simple Example
import bootstrapper from 'react-async-bootstrapper'
// Our super naive global state. Don't copy this, it's just illustrative. You'd
// likely want to use something
const globalStateManager = {
products: {},
}
class Product extends Component {
// 👇
bootstrap() {
// Fetch our product and load up our state
return fetch(`/api/products/${this.props.productId}`).then(response => {
// store in our global state
globalStateManager.products[this.props.productId] = response.json()
})
}
render() {
const product = globalStateManager.products[this.props.productId]
return (
<div>
{product.name} - {product.price}
</div>
)
}
}
const app = (
<div>
<h1>My favourite product</h1>
<Product productId={1337} />
</div>
)
// Now for the bootstrapping/rendering process (on a client/server)
bootstrapper(app)
.then(() => {
// Bootstrapping is complete, now when we render our application to the DOM
// the global products state will be populated and so our components
// should render immediately with the data.
ReactDOM.render(app, document.getElementById('app'))
})
.catch(err => console.log('Eek, error!', err))
Yep, not a particularly useful idea in the context of executing on the front end only, but when doing server side rendering of your react application this pattern can be extremely useful.
API
The API is very simple at the moment, only exposing a single function.
bootstrapper
The default export of the library. The function that performs the magic.
const bootstrapper = require('react-async-bootstrapper')
or
import bootstrapper from 'react-async-bootstrapper'
Paramaters
app (React/Preact application/element, required)
The react application you wish to walk.
e.g.
<div>Hello world</div>
options (
Object
, optional)Additional options/configuration. It currently supports the following values:
- componentWillUnmount: Enable this to have the
componentWillUnmount
lifecycle event be executed during the bootstrapping process. Defaults tofalse
. This was added as an experimental additional flag to help with applications where they have critical disposal logic being executed within thecomponentWillUnmount
lifecycle event.
- componentWillUnmount: Enable this to have the
context (
Object
, optional)Any context you wish to expose to your application. This will become available to the entire application and could be useful for exposing configuration to your
bootstrap
methods.e.g.
{ myContextItem: 'foo' }
Returns
A Promise
that resolves when the bootstrapping has completed.