@heliobentes/global-state

React Global State

---

Manage your Application-Wide States in 1 line of code without the need of Redux or any other complex state management packages.

Start here

• About
• Getting Started
• Usage
• Authors

About

Reducers... Actions... Dispatcher... Providers... Why so complicated?
Manage your App-Wide States with a single line of code. 100% compatible with default React useState().

Getting Started

Prerequisites

Global State requires only React and is a React Hook component only. It won't work for classes (you are more than welcome to modify it and make it work with classes! Thanks in advance!)

Installing

Install it using npm

npm i @heliobentes/globalstate

Usage

Use Global State as you would use the default React useState() hook (learn more) and simply add an identifier to it on every component you want to manage the state on.

Regular useState

const [loading, setLoading] = useState(false);

Normal usage

//add this line to every component you want to manage the state on
const [loading, setLoading] = useGlobalState("page-loader", false); 

Forcing a state reset

Your state will assume value for the first time the hook is called in your application. Every subsequent render will ignore the value unless you specify forceNewState as true. This will force your global state to assume the new value passed.

//this will forcec the globalstate to the specified value
const [loading, setLoading] = useGlobalState("page-loader", false, true);

Example

import React from 'react';
import useGlobalState from "@heliobentes/global-state";

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useGlobalState("count",0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Authors

• @heliobentes - Idea & Initial work