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

This is a package to easily handling global-state across your react-native-components No-redux... The library now includes @react-native-async-storage/async-storage to persist your state across sessions... if you want to keep using the old version without

import type { StateHook, ActionCollectionConfig, ActionCollectionResult, GlobalStoreCallbacks } from "react-hooks-global-states/types";
import { AsyncStorageConfig, AsyncMetadata, BaseMetadata } from "./types";
import React from "react";
export type { InferActionsType } from "react-hooks-global-states/createGlobalState";
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>>, AsyncMetadata>;
    /**
     * 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.asyncStorage 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 AsyncMetadata, ActionsConfig extends ActionCollectionConfig<State, Metadata> | null | {}, PublicStateMutator = keyof ActionsConfig extends never | undefined ? React.Dispatch<React.SetStateAction<State>> : ActionCollectionResult<State, Metadata, NonNullable<ActionsConfig>>>(state: State, args: {
        name?: string;
        metadata?: Metadata;
        callbacks?: GlobalStoreCallbacks<State, PublicStateMutator, Metadata>;
        actions?: ActionsConfig;
        asyncStorage?: AsyncStorageConfig;
    }): StateHook<State, PublicStateMutator, BaseMetadata<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.asyncStorage 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 AsyncMetadata, ActionsConfig extends ActionCollectionConfig<State, Metadata>, PublicStateMutator = ActionCollectionResult<State, Metadata, NonNullable<ActionsConfig>>>(state: State, args: {
        name?: string;
        metadata?: Metadata;
        callbacks?: GlobalStoreCallbacks<State, PublicStateMutator, Metadata>;
        actions: ActionsConfig;
        asyncStorage?: AsyncStorageConfig;
    }): StateHook<State, PublicStateMutator, 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;