react-global-state-hooks/createGlobalState.d.ts

This is a package to easily handling global-state across your react components No-redux, No-context.

import type React from 'react';
import { StateHook, BaseMetadata, ActionCollectionConfig, ActionCollectionResult, GlobalStoreCallbacks } from 'react-hooks-global-states/types';
export type { InferActionsType } from 'react-hooks-global-states/createGlobalState';
import { LocalStorageConfig } from './types';
export interface CreateGlobalState {
    /**
     * Creates a global state hook.
     * @param state initial state value
     * @returns a state hook for your components
     * @example
     * const useCounter = createGlobalState(0);
     *
     * function Counter() {
     *   const [count, setCount] = useCounter();
     *   return (
     *     <div>
     *       <p>Count: {count}</p>
     *       <button onClick={() =>
     *         setCount(prev => prev + 1)
     *       }>Increment</button>
     *     </div>
     *   );
     * }
     */
    <State>(state: State): StateHook<State, React.Dispatch<React.SetStateAction<State>>, React.Dispatch<React.SetStateAction<State>>, BaseMetadata>;
    /**
     * Creates a global state hook that you can use across your application
     * @param state initial state value
     * @param args additional configuration for the global state
     * @param args.name optional name for debugging purposes
     * @param args.metadata optional non-reactive metadata associated with the state
     * @param args.callbacks optional lifecycle callbacks for the global state
     * @param args.actions optional actions to restrict state mutations [if provided `setState` will be nullified]
     * @param args.localStorage optional configuration to persist the state in local storage
     * @returns a state hook that you can use in your components
     *
     * @example
     * ```tsx
     * const useCounter = createGlobalState(0, {
     *   actions: {
     *     increase() {
     *       return ({ setState }) => {
     *         setState((c) => c + 1);
     *       };
     *     },
     *     decrease(amount: number) {
     *       return ({ setState }) => {
     *         setState((c) => c - amount);
     *       };
     *     },
     *   },
     * });
     *
     * function Counter() {
     *  const [count, {
     *    increase,
     *    decrease
     *  }] = useCounter();
     *
     *  return (
     *   <div>
     *    <p>Count: {count}</p>
     *    <button onClick={increase}>
     *      Increment
     *    </button>
     *    <button onClick={() => {
     *      decrease(1);
     *    }}>
     *      Decrement
     *    </button>
     *   </div>
     *  );
     * }
     * ```
     */
    <State, Metadata extends BaseMetadata, ActionsConfig extends ActionCollectionConfig<State, Metadata> | null | {}, PublicStateMutator = keyof ActionsConfig extends never | undefined ? React.Dispatch<React.SetStateAction<State>> : ActionCollectionResult<State, Metadata, NonNullable<ActionsConfig>>, StateDispatch = React.Dispatch<React.SetStateAction<State>>>(state: State, args: {
        name?: string;
        metadata?: Metadata;
        callbacks?: GlobalStoreCallbacks<State, Metadata>;
        actions?: ActionsConfig;
        localStorage?: LocalStorageConfig;
    }): StateHook<State, StateDispatch, PublicStateMutator, Metadata>;
    /**
     * Creates a global state hook that you can use across your application
     * @param state initial state value
     * @param args additional configuration for the global state
     * @param args.name optional name for debugging purposes
     * @param args.metadata optional non-reactive metadata associated with the state
     * @param args.callbacks optional lifecycle callbacks for the global state
     * @param args.actions optional actions to restrict state mutations [if provided `setState` will be nullified]
     * @param args.localStorage optional configuration to persist the state in local storage
     * @returns a state hook that you can use in your components
     *
     * @example
     * ```tsx
     * const useCounter = createGlobalState(0, {
     *   actions: {
     *     increase() {
     *       return ({ setState }) => {
     *         setState((c) => c + 1);
     *       };
     *     },
     *     decrease(amount: number) {
     *       return ({ setState }) => {
     *         setState((c) => c - amount);
     *       };
     *     },
     *   },
     * });
     *
     * function Counter() {
     *  const [count, {
     *    increase,
     *    decrease
     *  }] = useCounter();
     *
     *  return (
     *   <div>
     *    <p>Count: {count}</p>
     *    <button onClick={increase}>
     *      Increment
     *    </button>
     *    <button onClick={() => {
     *      decrease(1);
     *    }}>
     *      Decrement
     *    </button>
     *   </div>
     *  );
     * }
     * ```
     */
    <State, Metadata extends BaseMetadata, ActionsConfig extends ActionCollectionConfig<State, Metadata>, StateDispatch = React.Dispatch<React.SetStateAction<State>>>(state: State, args: {
        name?: string;
        metadata?: Metadata;
        callbacks?: GlobalStoreCallbacks<State, Metadata>;
        actions: ActionsConfig;
        localStorage?: LocalStorageConfig;
    }): StateHook<State, StateDispatch, ActionCollectionResult<State, Metadata, ActionsConfig>, Metadata>;
}
/**
 * Creates a global state hook.
 * @param state - The initial state value.
 * @param args - Optional configuration arguments.
 * @returns A state hook for managing the global state, the hook also embeds the state api methods.
 */
export declare const createGlobalState: CreateGlobalState;
export default createGlobalState;