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
JavaScript
"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