react-toggle-management
Version:
A lightweight React library for managing toggleable global state—designed to be simpler than Zustand and more focused than Redux.
150 lines (144 loc) • 4.14 kB
JavaScript
;
"use client";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/index.ts
var index_exports = {};
__export(index_exports, {
ToggleGlobalProvider: () => ToggleGlobalProvider,
createToggleStore: () => createToggleStore,
useToggle: () => useToggle
});
module.exports = __toCommonJS(index_exports);
// src/ToggleProvider.tsx
var import_react2 = require("react");
// src/ToggleContext.ts
var import_react = require("react");
var ToggleStateContext = (0, import_react.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
var import_jsx_runtime = require("react/jsx-runtime");
var defaultToggleStore = createToggleStore();
function ToggleGlobalProvider({
children,
initialState
}) {
const store = (0, import_react2.useMemo)(() => {
return initialState ? createToggleStore(initialState) : defaultToggleStore;
}, [initialState]);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToggleContext_default.Provider, { value: store, children });
}
// src/useToggle.ts
var import_react3 = require("react");
function useToggle(defaultKey) {
const store = (0, import_react3.useContext)(ToggleContext_default);
if (!store) {
throw new Error(
"useToggle must be used within a ToggleStateContextProvider"
);
}
const isOpen = (0, import_react3.useSyncExternalStore)(
store.subscribe,
() => store.getState().has(defaultKey) ?? false,
() => false
);
const readIsOpen = (0, import_react3.useCallback)(
(key) => {
return store.getState().has(key ?? defaultKey) ?? false;
},
[defaultKey, store]
);
const open = (0, import_react3.useCallback)(
(key) => {
store.setToggle(key ?? defaultKey, true);
},
[defaultKey, store]
);
const close = (0, import_react3.useCallback)(
(key) => {
store.setToggle(key ?? defaultKey, false);
},
[defaultKey, store]
);
const toggle = (0, import_react3.useCallback)(
(key) => {
store.toggle(key ?? defaultKey);
},
[defaultKey, store]
);
const reset = (0, import_react3.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
};
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
ToggleGlobalProvider,
createToggleStore,
useToggle
});
//# sourceMappingURL=index.js.map