@buoyant/react

1.1.0 • Public • Published

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

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 1.1.0
    2
    • latest

Version History

Package Sidebar

Install

npm i @buoyant/react

Weekly Downloads

2

Version

1.1.0

License

none

Unpacked Size

8.54 kB

Total Files

12

Last publish

Collaborators

  • s-tags