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