Reusable React utilities, hooks, and components for React applications
npm install mrdev-react-utilsA comprehensive collection of reusable React utilities, hooks, components, and helper functions.
``bash`
npm install mrdev-react-utilsor
yarn add mrdev-react-utils
This package requires React 16.8.0 or higher (for hooks support).
`jsx
import {
// Hooks
useBool, useObject, useString, useNumber, useArray, useFlags, useGlobalEvents,
// Components
Each, EachEntry,
// Utilities
first, last, pick, capitalize, mergeWith, isFunction, isObject
} from 'mrdev-react-utils';
function MyComponent() {
const { state: isOpen, toggle } = useBool({ start: false });
const items = ['apple', 'banana', 'orange'];
return (
First item: {first(items)}
Last item: {last(items)}
Available Features
$3
#### State Management Hooks
- useBool({ start, onTrue, onFalse, onToggle }) - Manage boolean state with callbacks
- Returns:
{ state, set, on, off, toggle, reset }- useObject({ start, onFieldUpdate, onUpdate, onClear }) - Manage object state
- Returns:
{ state, set, update, reset, clear }- useString({ start, values, fallback, onUpdate }) - Manage string state with validation
- Returns:
{ state, values, set, is, reset, clear }- useNumber({ start, zero, end, step, positiveOnly, ... }) - Manage number state with validation
- Returns:
{ state, zero, step, positive, set, add, sub, reset, clear }- useArray(startState, { onAdd, onRemove, onUpdate, onClear }) - Manage array state
- Returns:
{ state, set, add, remove, update, reset, clear }- useFlags({ start, onUpdate, onClear }) - Manage object with boolean values
- Returns:
{ state, set, update, reset, clear, toggle }#### Event Hooks
- useGlobalEvents(instanceName, listeners) - Manage GlobalState event listeners
- Returns: The GlobalState instance
$3
- Each({ if, of, as, or }) - Utility component for rendering arrays
`jsx
if={array.length > 0}
of={array}
as={(item, index) => {item} }
or="No items"
/>
`- EachEntry({ if, of, as, or }) - Utility component for rendering object entries
`jsx
if={Object.keys(obj).length > 0}
of={obj}
as={([key, value], index) => {key}: {value}}
or="Empty object"
/>
`$3
#### Array Utilities
-
first(array): Returns the first element of an array
- last(array): Returns the last element of an array
- uniq(array): Creates a duplicate-free version of an array
- take(array, n): Takes n elements from the beginning of an array
- arrIf(condition, item, fallback): Conditionally adds items to an array
- getBy(criteria, array): Finds an element in an array by property#### Object Utilities
-
isNil(value): Checks if value is null or undefined
- pick(object, paths): Creates an object with selected properties
- assign(object, ...sources): Assigns properties from source objects
- mergeWith(object, ...sources, customizer): Merges objects with custom function
- isNonNullObject(value): Checks if value is a non-null object
- objIf(condition, fields, fallback): Conditionally includes object properties
- safeParse(str, fallback): Safely parses JSON with fallback#### Type Checking Utilities
-
isArray(value): Checks if value is an array
- isBoolean(value): Checks if value is a boolean
- isFunction(value): Checks if value is a function
- isObjectLike(value): Checks if value is object-like
- isPlainObject(value): Checks if value is a plain object
- isObject(value): Checks if value is an object#### String Utilities
-
capitalize(string): Capitalizes the first character of a string
- get(object, path, defaultValue): Gets value at path of object
- capitalizeWords(str): Capitalizes the first character of each word
- camelCaseToCapital(string): Converts camelCase to Title Case#### Function Utilities
-
safeCall(callback, fallback): Safely calls a function if it exists
- callOn(key, options, params): Calls a function based on a key in options
- switchOn(key, options, defaultValue): Returns a value based on a key in options#### Object Traversal Utilities
-
onEntries(obj, callback): Iterates over object entries
- mapEntries(obj, callback): Maps object entries
- filterEntries(obj, callback): Filters object entries
- onKeys(obj, callback): Iterates over object keys
- mapKeys(obj, callback): Maps object keys
- filterKeys(obj, callback): Filters object keys
- onValues(obj, callback): Iterates over object values
- mapValues(obj, callback): Maps object values
- filterValues(obj, callback): Filters object values
- transformEntries(obj, mapFn): Transforms object entries$3
- GlobalState - A powerful state management solution
-
GlobalState.create(instances): Create named state instances
- GlobalState.get(name): Get a state instance by name
- Instance methods:
- store(entry): Store or update state
- read(key): Read state values
- on(event, listener): Register event listeners
- emit(event, ...args): Trigger events
- off(event, listener): Remove listeners
- clear(event): Clear all listeners for an eventExamples
$3
`jsx
function ToggleComponent() {
const { state: isVisible, toggle } = useBool({ start: false });
return (
{isVisible && This content can be toggled}
);
}
`$3
`jsx
// Initialize global state
GlobalState.create({
appState: {
darkMode: false,
user: null,
notifications: []
}
});// In a component
function ThemeToggle() {
const globalState = useGlobalEvents('appState', {
'darkMode': (prev, current) => console.log(
Theme changed to ${current ? 'dark' : 'light'})
});
const toggleTheme = () => {
const currentMode = globalState.read('darkMode');
globalState.store({ darkMode: !currentMode });
};
return (
);
}
``MIT