data-in-globe

data-in-globe - TypeScript State Management Library

data-in-globe is an open-source TypeScript library for managing global state in React applications. It provides a simple and efficient way to share and manage application state across components.

Installation

You can install data-in-globe via npm or yarn:

npm install data-in-globe
# or
yarn add data-in-globe

Basic usage

declare your global data

// src/globalStore
import { GlobalData } from "data-in-globe";

export const globalCounter = new GlobalData({ count: 1 });

import and use your global data with useGlobalData

// src/App.tsx
import { GlobalData, useGlobalData } from "data-in-globe";
import { globalCounter } from './globalStore'

const [data, setData] = useGlobalData(globalCounter);

function App() {

  const onClick = () => {
    setData({
      count: data.count + 1,
    });
  };

  return (
    <div className="App">
      <button onClick={onClick}>click</button>
      {data?.count}
    </div>
  );
}

API

GlobalData<Data>

GlobalData is a class that represents a global data store. It allows you to create and manage a global state object.

Constructor

• new GlobalData<Data>(data: Data): GlobalData<Data>

  Initializes a new GlobalData instance with an initial data object. The data parameter is the initial state that you want to manage globally.

Methods

• getData(): Readonly<Data>

  Returns a readonly reference to the current global state data.

• setData(state: Data): void

  Sets the global state data to the provided state. This method triggers all subscribed listeners.

• updateData(updater: (state: Data) => Data): void

  Updates the global state data using an updater function. The updater function receives the current state as an argument and should return the new state. This method leverages Immer for immutability and triggers all subscribed listeners.

• subscribe(listener: Function): () => void

  Subscribes a listener function to changes in the global state. Returns a function that can be used to unsubscribe the listener.

useGlobalData<State>(globalData: GlobalData<State>): [Readonly<State>, (state: State) => void, (updater: (state: State) => State) => void]

useGlobalData is a custom React hook that allows components to interact with a GlobalData instance.

Parameters

• globalData: GlobalData<State>

  A GlobalData instance that you want to use within your component.

Return Value

• [Readonly<State>, (state: State) => void, (updater: (state: State) => State) => void]

  Returns an array containing three elements:

  • Readonly<State>: A readonly reference to the current global state data.

  • (state: State) => void: A function that allows you to set the global state data to the provided state.

  • (updater: (state: State) => State) => void: A function that allows you to update the global state data using an updater function.

Example

Here's an example of how to use data-in-globe in a React component:

import React from "react";
import { GlobalData, useGlobalData } from "data-in-globe";

// Create a global data store
const globalState = new GlobalData({ count: 0 });

function App() {
  // Use the global state within a component
  const [data, setData, updateData] = useGlobalData(globalState);

  const increment = () => {
    updateData((state) => {
      return { count: state.count + 1 };
    });
  };

  return (
    <div>
      <p>Count: {data.count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default App;

In this example, we create a global data store using GlobalData, and then we use the useGlobalData hook to access and update the global state within the App component.

This documentation covers the core API of the data-in-globe library. You can use it to manage and share global state in your React applications efficiently.