npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-global-hooks

v1.3.3

Published

Global hooks for react

Downloads

170

Readme

React Global Hooks

React Global Hooks is a tiny, dead simple way to manage a global state piggy backing off React Hooks. It is extremely versatile, light weight, and fast.

Because React Global State relies on react hooks, ~~it will only work in functional components, just like react hooks. It will not work in class components~~ (can now be used in class components with some setup, see example below).

Install

You can install with

npm install react-global-hooks --save

or

yarn add react-global-hooks

Usage

There is not a lot to implementation, you simply need somewhere to store your global states where you can import a single instance of those states into components that will use them.

Creating Global States

You create a global state using the createGlobalState initializer An example store file might look like this.

// ./src/store.ts

import { createGlobalState } from 'react-global-hooks';

class Store {
    countState1 = createGlobalState(0);
    countState2 = createGlobalState(0);
}

const store = new Store();
export default store;

Or, simply

// ./src/globalStates

import { createGlobalState } from 'react-global-hooks';

export const countState1 = createGlobalState(0);
export const countState2 = createGlobalState(0);

Methods

Each global state has 5 primary methods set, get, use, useValue, onChange.

set allows you to set a new value for the global state. eg. myState.set('hello world')

get returns the current global state value. eg myState.get() . This will return the current value of the state. You can optionally pass a boolean to this method to clone the value, myState.get(true), which will return a copy of the value instead of a pointer to the value object. Note: Using this method to get a value will not trigger an update within a react component. For that, you will need to use the use or useValue method.

use returns a two part array that works identicaly to React's useState method. eg const [value, setValue] = myState.use(). Using this method in a react component will cause it to update if/when the state is updated.

useValue is similar to use, but only returns the value instead of an array of the value and a setter. This is useful when you have a react component that only needs to read and update the value, but will not change the value. eg const value = myState.useValue().

onChange registers a callback when the value is updated. This is useful for functions outside of react components, or to use React Global Hooks with class components (see below). eg myState.onChange((value) => { console.log('state updated', value) })

Using Global States

You use global states similarly to how you use the React hook useState. There are 2 methods. The first is using the .use() method of the global store. Such as.

import store from './store';

export default function App(){
    const [count1, updateCount1] = store.countState1.use();

    ...

Or you can use the useGlobalState method.

import store from './store';
import { useGlobalState } from 'react-global-hooks';

export default function App(){
    const [count1, updateCount1] = useGlobalState(store.countState1);

    ...

Both methods work identically and can be used interchangeably.

Updating Global States

Any component that uses a global state will update when the Global State is updated. You can update the global state 2 ways.

You can use the returned update method from useGlobalState or .use();

import store from './store';

export default function App(){
    const [count1, updateCount1] = store.countState1.use();

    return (
        <div
            onClick={() => {
                updateCount1(count1 + 1);
            }}
        >
            {count1}
        </div>
    )
}

You can also update the global state using the .set method

import store from './store';

export const incrementCount1 = () => {
    store.countState1.set(store.countState1.get() + 1);
}

Using in a class component

By the easiest way to use react-global-hooks is with a functional component, as that is what it was designed for. However, it can still be used in a class component if needed. You will just have to tie it into the state object of the component manually using the onChange method, and use the internal class state for rendering. For example:

import React from 'react';
import { countState } from './count';

export default class Count extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            count: countState.get()
        }
        countState.onChange((newVal) => {
            this.setState({
                count: newVal
            })
        })
    }
    render () {
        return (
            <div>
                {this.state.count}
            </div>
        )
    }
}

This is not ideal, and I will likely improve on class component implementations in the future.

Future Development

I plan on adding more functionality to this library to handle global states that mimick the usage of other react hooks, such as useRef, useEffect, etc. Currently, only the useState hook is implemented, as I found it most important

Typescript

The entire library is written in typescript and the states are properly typed. Whatever your initial type is when you create a state, will be the type of every returned state and the required type when updating the state.

Why did I build this?

Have you used other state managers? If so, why are you asking? They are all slow, bloated, hard to use, tedious to implement, and in general, pains in the a$$. React Global Hooks is fast, tiny, efficient, and extremely easy to use and implement.