diff --git a/README.md b/README.md index 48dc0486..b03bf8ce 100644 --- a/README.md +++ b/README.md @@ -55,6 +55,7 @@ function Component() { +- [`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). diff --git a/packages/usehooks-ts/README.md b/packages/usehooks-ts/README.md index 48dc0486..b03bf8ce 100644 --- a/packages/usehooks-ts/README.md +++ b/packages/usehooks-ts/README.md @@ -55,6 +55,7 @@ function Component() { +- [`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). diff --git a/packages/usehooks-ts/src/index.ts b/packages/usehooks-ts/src/index.ts index 9577bd16..927e75eb 100644 --- a/packages/usehooks-ts/src/index.ts +++ b/packages/usehooks-ts/src/index.ts @@ -1,3 +1,4 @@ +export * from './useArray' export * from './useBoolean' export * from './useClickAnyWhere' export * from './useCopyToClipboard' diff --git a/packages/usehooks-ts/src/useArray/index.ts b/packages/usehooks-ts/src/useArray/index.ts new file mode 100644 index 00000000..b590e61b --- /dev/null +++ b/packages/usehooks-ts/src/useArray/index.ts @@ -0,0 +1 @@ +export * from './useArray' diff --git a/packages/usehooks-ts/src/useArray/useArray.demo.tsx b/packages/usehooks-ts/src/useArray/useArray.demo.tsx new file mode 100644 index 00000000..1a35f0b5 --- /dev/null +++ b/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([1, 2, 3]) + + return ( + <> +
+
Array: {JSON.stringify(value)}
+ + +
+ + ) +} diff --git a/packages/usehooks-ts/src/useArray/useArray.md b/packages/usehooks-ts/src/useArray/useArray.md new file mode 100644 index 00000000..449fbfaf --- /dev/null +++ b/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. diff --git a/packages/usehooks-ts/src/useArray/useArray.test.ts b/packages/usehooks-ts/src/useArray/useArray.test.ts new file mode 100644 index 00000000..3c19e13f --- /dev/null +++ b/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]) + }) +}) diff --git a/packages/usehooks-ts/src/useArray/useArray.ts b/packages/usehooks-ts/src/useArray/useArray.ts new file mode 100644 index 00000000..0e2465b2 --- /dev/null +++ b/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 = { + /** 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([1, 2, 3]); + * ``` + */ + +export function useArray(initialValue: T[]): UseArrayReturnType { + const [array, setArray] = useState(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 } +}