UNPKG

react-toggle-management

Version:

A lightweight React library for managing toggleable global state—designed to be simpler than Zustand and more focused than Redux.

122 lines (117 loc) 2.85 kB
"use client"; // src/ToggleProvider.tsx import { useMemo } from "react"; // src/ToggleContext.ts import { createContext } from "react"; var ToggleStateContext = createContext(null); var ToggleContext_default = ToggleStateContext; // src/createToggleStore.ts var createToggleStore = (initialState = /* @__PURE__ */ new Set()) => { let state = initialState; const listeners = /* @__PURE__ */ new Set(); const getState = () => state; const subscribe = (listener) => { listeners.add(listener); return () => listeners.delete(listener); }; const setToggle = (key, value) => { if (state.has(key) === value) return; if (value) { state.add(key); } else { state.delete(key); } listeners.forEach((listener) => listener()); }; const toggle = (key) => { const current = state.has(key); setToggle(key, !current); }; const reset = () => { state = initialState; listeners.forEach((listener) => listener()); }; return { getState, subscribe, setToggle, toggle, reset }; }; // src/ToggleProvider.tsx import { jsx } from "react/jsx-runtime"; var defaultToggleStore = createToggleStore(); function ToggleGlobalProvider({ children, initialState }) { const store = useMemo(() => { return initialState ? createToggleStore(initialState) : defaultToggleStore; }, [initialState]); return /* @__PURE__ */ jsx(ToggleContext_default.Provider, { value: store, children }); } // src/useToggle.ts import { useContext, useCallback, useSyncExternalStore } from "react"; function useToggle(defaultKey) { const store = useContext(ToggleContext_default); if (!store) { throw new Error( "useToggle must be used within a ToggleStateContextProvider" ); } const isOpen = useSyncExternalStore( store.subscribe, () => store.getState().has(defaultKey) ?? false, () => false ); const readIsOpen = useCallback( (key) => { return store.getState().has(key ?? defaultKey) ?? false; }, [defaultKey, store] ); const open = useCallback( (key) => { store.setToggle(key ?? defaultKey, true); }, [defaultKey, store] ); const close = useCallback( (key) => { store.setToggle(key ?? defaultKey, false); }, [defaultKey, store] ); const toggle = useCallback( (key) => { store.toggle(key ?? defaultKey); }, [defaultKey, store] ); const reset = useCallback( (key) => { if (key) { const initialValue = store.getState().has(key) ?? false; store.setToggle(key, initialValue); } else { store.reset(); } }, [store] ); return { isOpen, open, close, toggle, reset, readIsOpen }; } export { ToggleGlobalProvider, createToggleStore, useToggle }; //# sourceMappingURL=index.mjs.map