Merge pull request #366 from Zaccal/useObject

useObject 🧊 [feat]: Create hook useObject

Author: debabin

packages/core/src/bundle/hooks/state.js

@@ -12,6 +12,7 @@ export * from './useList/useList';
 // storage
 export * from './useLocalStorage/useLocalStorage';
 export * from './useMap/useMap';
+export * from './useObject/useObject';
 export * from './useOffsetPagination/useOffsetPagination';
 export * from './useQuery/useQuery';
 export * from './useQueue/useQueue';

packages/core/src/bundle/hooks/useObject/useObject.js

@@ -0,0 +1,52 @@
+import { useState } from 'react';
+/**
+ * @name useObject
+ * @description - Hook that provides state and helper methods to manage an object
+ * @category State
+ *
+ * @template T The type of the object
+ * @param {T} initialValue The initial object value
+ * @returns {UseObjectReturn<T>} An object containing the current state and functions to interact with the object
+ *
+ * @example
+ * const { state, set, get, reset, update, merge, remove } = useObject({ a: 1, b: 2 });
+ */
+export function useObject(initialValue) {
+  const [state, setState] = useState(initialValue);
+  const set = (key, value) => {
+    setState((prev) => ({
+      ...prev,
+      [key]: value
+    }));
+  };
+  const get = (key) => {
+    return state[key];
+  };
+  const reset = () => {
+    setState(initialValue);
+  };
+  const update = (updater) => {
+    setState((prev) => updater(prev));
+  };
+  const merge = (newState) => {
+    setState((prev) => ({
+      ...prev,
+      ...newState
+    }));
+  };
+  const remove = (key) => {
+    setState((prev) => {
+      const { [key]: _, ...rest } = prev;
+      return rest;
+    });
+  };
+  return {
+    state,
+    set,
+    get,
+    reset,
+    update,
+    merge,
+    remove
+  };
+}

packages/core/src/hooks/useObject/useObject.demo.tsx

@@ -0,0 +1,48 @@
+import { useObject } from './useObject';
+
+const Demo = () => {
+  const { state, get, set, update, merge, remove, reset } = useObject({
+    name: 'Vladislav',
+    age: '32',
+    email: 'testmail@mail.com'
+  });
+
+  return (
+    <div className='flex items-start gap-4'>
+      <div className=''>
+        <input
+          type='text'
+          value={state.name}
+          onChange={(event) => set('name', event.target.value)}
+          placeholder='Name'
+        />
+        <input
+          type='number'
+          value={state.age}
+          onChange={(event) => set('age', event.target.value)}
+          placeholder='Age'
+        />
+        <input
+          type='email'
+          value={state.email}
+          onChange={(event) => set('email', event.target.value)}
+          placeholder='Email'
+        />
+        <div className=''>
+          <button onClick={reset}>Reset</button>
+          <button onClick={() => alert(get('email'))}>Get Email</button>
+          <button onClick={() => update((prev) => ({ ...prev, age: '10' }))}>Update Age</button>
+          <button onClick={() => merge({ name: 'Updated name', age: '10' })}>
+            Merge Name and Age
+          </button>
+          <button onClick={() => remove('email')}>Remove Email</button>
+        </div>
+      </div>
+      <pre>
+        <code>{JSON.stringify(state, null, 2)}</code>
+      </pre>
+    </div>
+  );
+};
+
+export default Demo;

packages/core/src/hooks/useObject/useObject.test.ts

@@ -0,0 +1,73 @@
+import { act, renderHook } from '@testing-library/react';
+
+import { useObject } from './useObject';
+
+const INITIAL_OBJECT = { a: 1, b: 2, c: 3 };
+
+describe('useObject', () => {
+  it('Should use object', () => {
+    const { result } = renderHook(() => useObject(INITIAL_OBJECT));
+    const obj = result.current;
+
+    expect(obj.state).toEqual(INITIAL_OBJECT);
+    expect(obj.set).toBeTypeOf('function');
+    expect(obj.get).toBeTypeOf('function');
+    expect(obj.reset).toBeTypeOf('function');
+    expect(obj.update).toBeTypeOf('function');
+    expect(obj.merge).toBeTypeOf('function');
+    expect(obj.remove).toBeTypeOf('function');
+  });
+
+  it('Should set property', () => {
+    const { result } = renderHook(() => useObject(INITIAL_OBJECT));
+    const obj = result.current;
+
+    act(() => obj.set('a', 42));
+
+    expect(result.current.state).toEqual({ a: 42, b: 2, c: 3 });
+  });
+
+  it('Should get property', () => {
+    const { result } = renderHook(() => useObject(INITIAL_OBJECT));
+    const obj = result.current;
+
+    expect(obj.get('b')).toBe(2);
+  });
+
+  it('Should reset object', () => {
+    const { result } = renderHook(() => useObject(INITIAL_OBJECT));
+    const obj = result.current;
+
+    act(() => obj.set('a', 99));
+    act(() => obj.reset());
+
+    expect(result.current.state).toEqual(INITIAL_OBJECT);
+  });
+
+  it('Should update object', () => {
+    const { result } = renderHook(() => useObject(INITIAL_OBJECT));
+    const obj = result.current;
+
+    act(() => obj.update((prev) => ({ ...prev, d: 4 }) as typeof INITIAL_OBJECT & { d: number }));
+
+    expect(result.current.state).toEqual({ a: 1, b: 2, c: 3, d: 4 });
+  });
+
+  it('Should merge object', () => {
+    const { result } = renderHook(() => useObject(INITIAL_OBJECT));
+    const obj = result.current;
+
+    act(() => obj.merge({ b: 10 }));
+
+    expect(result.current.state).toEqual({ a: 1, b: 10, c: 3 });
+  });
+
+  it('Should remove property', () => {
+    const { result } = renderHook(() => useObject(INITIAL_OBJECT));
+    const obj = result.current;
+
+    act(() => obj.remove('b'));
+
+    expect(result.current.state).toEqual({ a: 1, c: 3 });
+  });
+});

packages/core/src/hooks/useObject/useObject.ts

@@ -0,0 +1,78 @@
+import { useState } from 'react';
+
+/** The useObject return type */
+export interface UseObjectReturn<T extends object> {
+  /** The current object state */
+  state: T;
+  /** Gets a property from the object */
+  get: (key: keyof T) => T[keyof T];
+  /** Merges a partial object into the state */
+  merge: (newState: Partial<T>) => void;
+  /** Removes a property from the object */
+  remove: (key: keyof T) => void;
+  /** Resets the object to its initial value */
+  reset: () => void;
+  /** Sets a property on the object */
+  set: (key: keyof T, value: T[keyof T]) => void;
+  /** Updates the object using an updater function */
+  update: (updater: (prev: T) => T) => void;
+}
+
+/**
+ * @name useObject
+ * @description - Hook that provides state and helper methods to manage an object
+ * @category State
+ *
+ * @template T The type of the object
+ * @param {T} initialValue The initial object value
+ * @returns {UseObjectReturn<T>} An object containing the current state and functions to interact with the object
+ *
+ * @example
+ * const { state, set, get, reset, update, merge, remove } = useObject({ a: 1, b: 2 });
+ */
+export function useObject<T extends object>(initialValue: T): UseObjectReturn<T> {
+  const [state, setState] = useState<T>(initialValue);
+
+  const set = (key: keyof T, value: T[keyof T]) => {
+    setState((prev) => ({
+      ...prev,
+      [key]: value
+    }));
+  };
+
+  const get = (key: keyof T): T[keyof T] => {
+    return state[key];
+  };
+
+  const reset = () => {
+    setState(initialValue);
+  };
+
+  const update = (updater: (prev: T) => T) => {
+    setState((prev) => updater(prev));
+  };
+
+  const merge = (newState: Partial<T>) => {
+    setState((prev) => ({
+      ...prev,
+      ...newState
+    }));
+  };
+
+  const remove = (key: keyof T) => {
+    setState((prev) => {
+      const { [key]: _, ...rest } = prev;
+      return rest as T;
+    });
+  };
+
+  return {
+    state,
+    set,
+    get,
+    reset,
+    update,
+    merge,
+    remove
+  };
+}