Easy state manager for state values from one component to the other with useState and React Hooks in < 1KB!

See Demo On Codesandbox

⚡️Overview

Have you ever tried to move the value of a state from a child to the parent without using large state managment tools like Redux, Mobx e.t.c ?. Broadstate is an easy state manager for state values from one component to the other with useState and React Hooks in < 1KB!

🔧 Installation

You can easily install this package with yarn or npm:

$ yarn add broad-state

or

$ npm install --save broad-state

✨ Features

• 😎 Easy to learn
• 📦 ~388b (gzipped)
• 🙅‍♂️ Zero dependencies
• ✂️ Super-flexible API
• ✅ Fully tested and reliable
• ⚒ CommonJS, ESM & browser standalone support

📖 Usage

Some usage terms you need to be familar with – createObservable, useBroadState

• createObservable, takes in the central state you need to be observed,
• useBroadState, hooks that handle reading state and dispatching actions

Here is a simple example

export const counter = createObservable(0);
// Other Observable value goes here

import React from 'react';
import { createObservable, useBroadState } from 'broad-state';
import { counter } from './observable';

export default function App() {
  const [state, setState] = useBroadState(counter);
  return (
    <div className="App">
      <h2>Broad State Demo</h2>
      <h1>{state}</h1>
      <button onClick={() => setState(state + 1)}>+</button>
      <button onClick={() => setState(state - 1)} disabled={state === 0}>
        -
      </button>
    </div>
  );
}

🤔Thought Process

Broadstate is built on top of React Hooks. I first tried this concept in a project i was working on and seeing the re-usability and convenience, I decided to convert it to a standalone open-source library for others to benefit from the awesomeness of React Hooks.

🤝 License

MIT © codewonders.dev  ·  GitHub @adenekan41 / codewonders