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 own 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 it 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 shortcut for array functionalities
useIsCSR	() => {}	Checks if page is being rendered at 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 changes frequently returns debounced value after 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 state inside an async callback, instead of at the time the callback was created
useForceUpdate	() => void	Force updates the component when needed. For example, setting some state to ref and need to update when ref changed
useLocalStorage	value: any setValue:() => {} remove:() => {}	Handles localstorage interactions. Supports server-side rendering
useCombinedRefs	forwardedRef : MutableRefObject<T> internalRef : MutableRefObject<T>	Combines all passed props. Usefull when React.forwardRef and internal ref is 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 even listeners 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 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 script and possibly the mouse (or pointer)
useFindFocusableElements	node: HTMLElement[]	Gets focusable elements inside of passed nodeRef. The element can be focused by script (element.focus()) and possibly the mouse (or pointer), but not the keyboard
useIsomorphicLayoutEffect	() => {}	Interchanges between useLayoutEffect() and useEffect() hooks depending on typeof document. If typeof document returns 'undefined' useLayoutEffect() hook will be called, otherwise useEffect() hook will be called.