Hooks
Content​
This page shows custom hooks used during the development of the Cactus UI Library. Besides UI components you can also import hooks and use them on your project easily.
If you are interested in learning more about custom hooks deeply, you can visit React JS's Custom Hooks Page.
Importing Hooks​
Custom Hooks can be imported as shown below:
import { use<HookName> } from '@ciceksepeti/cui-hooks';
Custom Hooks List​
Name | Type | Description |
useArray | value: T[] clear: () => void isEmpty: () => boolean push: (value: T) => void set: (value: T[]) => void includes: (value: T) => boolean remove: (value: number) => void map: (fn: (value: T) => any) => any find: (fn: (value: T) => any) => any filter: (fn: (value: T) => any) => any findIndex: (fn: (value: T) => any) => any | Provides shortcuts for array functionalities |
useIsCSR | () => {} | Checks if the page is being rendered at the client-side or server-side. If returns true, it is client-side otherwise server-side |
usePrevious | value: T | Holds a value with ref. Returns it every value change and updates with useEffect |
useDebounce | text : string delay : number | Needed to limit component re-renders when a variable change frequently returns a debounced value after a timeout |
useIsMounted | () => {} | Returns a memoized callback function to retrieve isMounted boolean value. returns true if mounted, otherwise false |
useLatestValue | value: MutableRefObject<T> | Stores latest value with ref. Useful to get access to the latest value of some props or states inside an async callback, instead of at the time the callback was created |
useForceUpdate | () => void | Force updates the component when needed. For instance, setting some states to the ref and needing to update when the ref has changed |
useLocalStorage | value: any setValue:() => {} remove:() => {} | Handles local storage interactions. Supports server-side rendering |
useCombinedRefs | forwardedRef : MutableRefObject<T> internalRef : MutableRefObject<T> | Combines all passed props. Useful when React.forwardRef and the internal ref are needed at the same time |
useEventListener | listener: (evt: Event): void name: keyof HTMLElementEventMap | string target: | Window | Document | EventTarget | HTMLElement | RefObject<any> | typeof globalThis| MutableRefObject<any>; | Mounts and unmounts event listeners which stores all params in refs to avoid re-running effect for every render |
useOnClickOutside | specifiedNodeRef: RefObject<T> callback: (event: MouseEvent | TouchEvent) => void | Captures outside click of a specified area. Calls handler when outside of a specified area is clicked or touched |
useFindTabbableElements | node: HTMLElement[] | Gets tabbable elements inside of passed nodeRef. The element is keyboard focusable ('tabbable'), as it is part of the document's sequential focus navigation order. The element is also focusable by a script and possibly the mouse (or pointer) |
useFindFocusableElements | node: HTMLElement[] | Gets focusable elements inside of passed nodeRef. The element can be focused by a script (element.focus()) and possibly the mouse (or pointer), but not the keyboard |
useIsomorphicLayoutEffect | () => {} | Interchanges between useLayoutEffect() and useEffect() hooks depending on the type of document. If the type of document returns 'undefined' useLayoutEffect() hook will be called, otherwise useEffect() |