use-silly-hooks
Version:
A collection of custom React hooks to simplify state management in your applications. 🚀
176 lines (170 loc) • 6.11 kB
JavaScript
;
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, {
useArray: () => useArray,
useBoolean: () => useBoolean,
useNumber: () => useNumber,
useObject: () => useObject,
useString: () => useString
});
module.exports = __toCommonJS(index_exports);
// src/hooks/use-boolean.tsx
var import_react = require("react");
var useBoolean = (initialValue = false) => {
const [value, setValue] = (0, import_react.useState)(initialValue);
const setTrue = (0, import_react.useCallback)(() => setValue(true), []);
const setFalse = (0, import_react.useCallback)(() => setValue(false), []);
const toggle = (0, import_react.useCallback)(() => setValue((prev) => !prev), []);
const reset = (0, import_react.useCallback)(() => setValue(initialValue), [initialValue]);
return [value, setValue, setTrue, setFalse, toggle, reset];
};
// src/hooks/use-string.tsx
var import_react2 = require("react");
var useString = (initialValue = "") => {
const [value, setValue] = (0, import_react2.useState)(initialValue);
const transform = (0, import_react2.useCallback)((type) => {
switch (type) {
case "lowercase":
setValue((prev) => prev.toLowerCase());
break;
case "uppercase":
setValue((prev) => prev.toUpperCase());
break;
case "capitalize":
setValue((prev) => prev.charAt(0).toUpperCase() + prev.slice(1));
break;
case "pascal-case":
setValue(
(prev) => prev.split(/[-_\s]+/).map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join("")
);
break;
case "camel-case":
setValue(
(prev) => prev.split(/[-_\s]+/).map((word, index) => index === 0 ? word.toLowerCase() : word.charAt(0).toUpperCase() + word.slice(1)).join("")
);
break;
case "kebab-case":
setValue((prev) => prev.toLowerCase().replace(/[\s_]+/g, "-"));
break;
case "snake-case":
setValue((prev) => prev.toLowerCase().replace(/[\s-]+/g, "_"));
break;
default:
break;
}
}, []);
const reset = (0, import_react2.useCallback)(() => {
setValue(initialValue);
}, [initialValue]);
return [value, setValue, transform, reset];
};
// src/hooks/use-number.tsx
var import_react3 = require("react");
var useNumber = (initialValue = 0) => {
const [value, setValue] = (0, import_react3.useState)(initialValue);
const increment = (0, import_react3.useCallback)((step = 1) => {
setValue((prev) => prev + step);
}, []);
const decrement = (0, import_react3.useCallback)((step = 1) => {
setValue((prev) => prev - step);
}, []);
const multiply = (0, import_react3.useCallback)((factor) => {
setValue((prev) => prev * factor);
}, []);
const divide = (0, import_react3.useCallback)((divisor) => {
if (divisor === 0) return;
setValue((prev) => prev / divisor);
}, []);
const reset = (0, import_react3.useCallback)(() => {
setValue(initialValue);
}, [initialValue]);
const setMin = (0, import_react3.useCallback)((min) => {
setValue((prev) => Math.max(prev, min));
}, []);
const setMax = (0, import_react3.useCallback)((max) => {
setValue((prev) => Math.min(prev, max));
}, []);
return [value, setValue, increment, decrement, multiply, divide, reset, setMin, setMax];
};
// src/hooks/use-array.tsx
var import_react4 = require("react");
var useArray = (initialValue = []) => {
const [value, setValue] = (0, import_react4.useState)(initialValue);
const push = (0, import_react4.useCallback)((item) => {
setValue((prev) => [...prev, item]);
}, []);
const pop = (0, import_react4.useCallback)(() => {
setValue((prev) => prev.slice(0, -1));
}, []);
const shift = (0, import_react4.useCallback)(() => {
setValue((prev) => prev.slice(1));
}, []);
const unshift = (0, import_react4.useCallback)((item) => {
setValue((prev) => [item, ...prev]);
}, []);
const clear = (0, import_react4.useCallback)(() => {
setValue([]);
}, []);
const reset = (0, import_react4.useCallback)(() => {
setValue(initialValue);
}, [initialValue]);
return [value, setValue, push, pop, shift, unshift, clear, reset];
};
// src/hooks/use-object.tsx
var import_react5 = require("react");
var useObject = (initialValue) => {
const [value, setValue] = (0, import_react5.useState)(initialValue);
const setProperty = (0, import_react5.useCallback)((key, newValue) => {
setValue((prev) => ({
...prev,
[key]: newValue
}));
}, []);
const removeProperty = (0, import_react5.useCallback)((key) => {
setValue((prev) => {
const newValue = { ...prev };
delete newValue[key];
return newValue;
});
}, []);
const clear = (0, import_react5.useCallback)(() => {
setValue({});
}, []);
const reset = (0, import_react5.useCallback)(() => {
setValue(initialValue);
}, [initialValue]);
const merge = (0, import_react5.useCallback)((newObject) => {
setValue((prev) => ({
...prev,
...newObject
}));
}, []);
return [value, setValue, setProperty, removeProperty, clear, reset, merge];
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
useArray,
useBoolean,
useNumber,
useObject,
useString
});
//# sourceMappingURL=index.cjs.map