Feature/use array hook

README.md

@@ -55,6 +55,7 @@ function Component() {
 
 <!-- HOOKS:START -->
 
+- [`useArray`](https://usehooks-ts.com/react-hook/use-array) — handles Array state with useful utility functions.
 - [`useBoolean`](https://usehooks-ts.com/react-hook/use-boolean) — handles boolean state with useful utility functions.
 - [`useClickAnyWhere`](https://usehooks-ts.com/react-hook/use-click-any-where) — handles click events anywhere on the document.
 - [`useCopyToClipboard`](https://usehooks-ts.com/react-hook/use-copy-to-clipboard) — copies text to the clipboard using the [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API).

packages/usehooks-ts/README.md

@@ -55,6 +55,7 @@ function Component() {
 
 <!-- HOOKS:START -->
 
+- [`useArray`](https://usehooks-ts.com/react-hook/use-array) — handles Array state with useful utility functions.
 - [`useBoolean`](https://usehooks-ts.com/react-hook/use-boolean) — handles boolean state with useful utility functions.
 - [`useClickAnyWhere`](https://usehooks-ts.com/react-hook/use-click-any-where) — handles click events anywhere on the document.
 - [`useCopyToClipboard`](https://usehooks-ts.com/react-hook/use-copy-to-clipboard) — copies text to the clipboard using the [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API).

packages/usehooks-ts/src/index.ts

@@ -1,3 +1,4 @@
+export * from './useArray'
 export * from './useBoolean'
 export * from './useClickAnyWhere'
 export * from './useCopyToClipboard'

packages/usehooks-ts/src/useArray/index.ts

@@ -0,0 +1 @@
+export * from './useArray'

packages/usehooks-ts/src/useArray/useArray.demo.tsx

@@ -0,0 +1,27 @@
+import { useArray } from './useArray'
+
+export default function Component() {
+ const { value, push, removeByIndex } = useArray<number>([1, 2, 3])
+
+ return (
+ <>
+ <div>
+ <div>Array: {JSON.stringify(value)}</div>
+ <button
+ onClick={() => {
+ push(4)
+ }}
+ >
+ Add 4
+ </button>
+ <button
+ onClick={() => {
+ removeByIndex(1)
+ }}
+ >
+ Remove at index 1
+ </button>
+ </div>
+ </>
+ )
+}

packages/usehooks-ts/src/useArray/useArray.md

@@ -0,0 +1 @@
+The useArray hook is a custom React hook designed to manage arrays in a React component state. It provides functions to manipulate the array, such as adding elements and removing elements by index.

packages/usehooks-ts/src/useArray/useArray.test.ts

@@ -0,0 +1,26 @@
+import { act, renderHook } from '@testing-library/react'
+
+import { useArray } from './useArray'
+
+describe('useArray hook', () => {
+ it('should initialize with the provided initial value', () => {
+ const { result } = renderHook(() => useArray([1, 2, 3]))
+ expect(result.current.value).toEqual([1, 2, 3])
+ })
+
+ it('should add an element to the array', () => {
+ const { result } = renderHook(() => useArray([1, 2, 3]))
+ act(() => {
+ result.current.push(4)
+ })
+ expect(result.current.value).toEqual([1, 2, 3, 4])
+ })
+
+ it('should remove an element from the array by index', () => {
+ const { result } = renderHook(() => useArray([1, 2, 3]))
+ act(() => {
+ result.current.removeByIndex(1)
+ })
+ expect(result.current.value).toEqual([1, 3])
+ })
+})

packages/usehooks-ts/src/useArray/useArray.ts

@@ -0,0 +1,38 @@
+import { useState } from 'react'
+
+/** This defines the return type of the custom hook `useArray`. */
+type UseArrayReturnType<T> = {
+ /** An array containing elements of type T. */
+ value: T[]
+ /** A function that adds an element of type T to the array. */
+ push: (element: T) => void
+ /** A function that removes an element from the array by its index. */
+ removeByIndex: (index: number) => void
+}
+
+/**
+ * Custom hook that handles Array state with useful utility functions.
+ * @param {[]} [initialValue] - The initial value for the Array state (default is `[]`).
+ * @returns {UseArrayReturnType} An object containing the utility functions to manipulate the state.
+ * @throws Will throw an error if `initialValue` is an invalid array value.
+ * @public
+ * @see Yet..
+ * @example
+ * ```tsx
+ * const { value, push, removeByIndex } = useArray<number>([1, 2, 3]);
+ * ```
+ */
+
+export function useArray<T>(initialValue: T[]): UseArrayReturnType<T> {
+ const [array, setArray] = useState<T[]>(initialValue)
+
+ const push = (element: T) => {
+ setArray(prevArray => [...prevArray, element])
+ }
+
+ const removeByIndex = (index: number) => {
+ setArray(prevArray => prevArray.filter((_, i) => i !== index))
+ }
+
+ return { value: array, push, removeByIndex }
+}