Buoyant
Buoyant is a state management library for react.
Installation
yarn add @buoyant/react
Usage
// YourRootComponent.js
import { Initializer } from '@buoyant/react';
const initialState = {}
const App = () => {
return (
<Initializer state={initialState}>
{ /* Render your components here. */ }
</Initializer>
)
}
...
Import Initializer
from @buoyant/react
then initialize your app by
wrapping your root component by the Initializer component.
Pass your initial state as state
props of the Initializer component.
- state:
object
State Subscription
// AnyComponentWithinYourApp.js
import { useBuoyantState } from '@buoyant/react';
const Component = () => {
const data = useBuoyantState('keyOfStateYouWantToSubscribe');
...
}
Import useBuoyantState
from @buoyant/react
.
useBuoyantState is a hook which subscribes you to a property inside your buoyant state.
It accepts key
as parameter wherein key is your unique identifier to a property inside the state.
Parameter:
- key:
string
State Mutation
// AnyComponentWithinYourApp.js
import { setBuoyantState } from '@buoyant/react';
const Component = () => {
const handleOnChange = () => {
let newData;
...
setBuoyantState("keyOfStateYouWantToMutate", newData)
}
...
}
Import setBuoyantState
from @buoyant/react
.
setBuoyantState is a method that mutate/update your property in your state.
Parameters:
- key:
string
- newData:
any
Persisting State
// YourRootComponent.js
import { Initializer } from '@buoyant/react';
const initialState = {};
const whitelistState = ["myStateIWantToPersist"];
const blacklistState = ["myStateIDontWantToPersist"];
const App = () => {
return (
<Initializer
whitelist={whitelistState}
blacklist={blacklistState}
state={initialState}
retain={true}
>
{ /* Render your components here. */ }
</Initializer>
)
}
...
Just pass the retain
props to the Initializer component.
Optionally, state black & white listing is available for persisting state.
Just pass blacklist
or whitelist
props to the Initilizer component.
- retain:
boolean
- blacklist:
string[]
- whitelist:
string[]
Usage Demo:
https://stackblitz.com/edit/buoyant-react-demo
Chrome Dev tool
: https://chrome.google.com/webstore/detail/buoyant-devtool/hgmlmmipobfdcgdckjnoedngifmplgbm