@rocket.chat/fuselage-hooks
React hooks for Fuselage, Rocket.Chat's design system and UI toolkit.
Install
yarn add @rocket.chat/fuselage-hooks
API Reference
Table of Contents
- useAutoFocus
- useBreakpoints
- useClipboard
- useDebouncedCallback
- useDebouncedReducer
- useDebouncedState
- useDebouncedUpdates
- useDebouncedValue
- useIsomorphicLayoutEffect
- useLazyRef
- useMediaQueries
- useMediaQuery
- useMergedRefs
- useMutableCallback
- usePosition
- usePrefersColorScheme
- usePrefersReducedData
- usePrefersReducedMotion
- useResizeObserver
- useSafely
- useStableArray
- useLocalStorage
- useSessionStorage
- useToggle
- useUniqueId
useAutoFocus
Hook to automatically request focus for an DOM element.
Parameters
-
isFocused
if true, the focus will be requested (optional, defaulttrue
) -
options
FocusOptions? options of the focus request
Returns Ref<{focus: function (options: FocusOptions): void}> the ref which holds the element
useBreakpoints
Hook to catch which responsive design' breakpoints are active.
Returns Array<string> an array of the active breakpoint names
useClipboard
Hook to copy the passed content to the clipboard.
Parameters
-
text
string -
$1
UseClipboardParams (optional, default{}
)-
$1.clearTime
(optional, default2000
) -
$1.onCopySuccess
(optional, default():void=>undefined
) -
$1.onCopyError
(optional, default():void=>undefined
)
-
Returns UseClipboardReturn an object with the copy function and the hasCopied state
useDebouncedCallback
Hook to memoize a debounced version of a callback.
Parameters
-
callback
function (...args: P): any the callback to debounce -
delay
number the number of milliseconds to delay -
deps
DependencyList? the hook dependencies
Returns any a memoized and debounced callback
useDebouncedReducer
Hook to create a reduced state with a debounced dispatch()
function.
Parameters
-
reducer
R the reducer function -
initialArg
I the initial state value or the argument passed to the initial state generator function -
init
function (arg: I): ReducerState<R> the initial state generator function -
delay
number the number of milliseconds to delay the updater
Returns [ReducerState<R>, any] a state and debounced dispatch()
function
useDebouncedState
Hook to create a state with a debounced setter function.
Parameters
-
initialValue
(S | function (): S) the initial state value or the initial state generator function -
delay
number the number of milliseconds to delay the updater
Returns [S, any] a state and debounced setter function
useDebouncedUpdates
Hook to debounce the state dispatcher function returned by hooks like useState()
and useReducer()
.
Parameters
-
pair
[S, DispatchWithoutAction] the state and dispatcher pair which will be debouncedpair.0
pair.1
-
delay
number the number of milliseconds to delay the dispatcher
Returns [S, any] a state value and debounced dispatcher pair
useDebouncedValue
Hook to keep a debounced reference of a value.
Parameters
-
value
V the value to be debounced -
delay
number the number of milliseconds to delay
Returns V a debounced value
useIsomorphicLayoutEffect
Replacement for the useEffect
hook that is safely ignored on SSR.
useLazyRef
Hook equivalent to useRef, but with a lazy initialization for computed value.
Parameters
-
init
the function the computes the ref value
Returns any the ref
useMediaQueries
Hook to listen to a set of media queries.
Parameters
Returns Array<boolean> a set of booleans expressing if the media queries match or not
useMediaQuery
Hook to listen to a media query.
Parameters
-
query
string? the CSS3 media query expression
Returns boolean true
if the media query matches; false
is it does not match or the query is not defined
useMergedRefs
Hook to merge refs and callbacks refs into a single callback ref. Useful when your component need a internal ref while receiving a forwared ref.
Parameters
-
refs
...Array<Ref<T>> the refs and callback refs that should be merged
Returns RefCallback<T> a merged callback ref
useMutableCallback
Hook to create a stable callback from a mutable one.
Parameters
-
fn
function (...args: P): T the mutable callback
Returns function (...args: P): T a stable callback
usePosition
Hook to deal and position an element using an anchor
Parameters
-
reference
RefObject<Element> the anchor -
target
RefObject<Element> -
options
PositionOptions options to position -
targetEl
the element to be positioned
Returns PositionResult The style containing top and left position
usePrefersColorScheme
Hook to get the prefers-color-scheme value.
Parameters
-
scheme
string?
Returns boolean true
if the prefers-color-scheme matches
usePrefersReducedData
Hook to get the prefers-reduce-data value.
Returns boolean true
if the prefers-reduce-data is set reduce in the media queries that matches
usePrefersReducedMotion
Hook to get the prefers-reduce-motion value.
Returns boolean true
if the prefers-reduce-motion is set reduce in the media queries that matches
useResizeObserver
Hook to track dimension changes in a DOM element using the ResizeObserver API.
Parameters
-
options
UseResizeObserverOptions (optional, default{}
)options.debounceDelay
Returns {ref: RefObject<Element>, contentBoxSize: ResizeObserverSize, borderBoxSize: ResizeObserverSize} a triple containing the ref and the size information
useSafely
Hook that wraps pairs of state and dispatcher to provide a new dispatcher which can be safe and asynchronically called even after the component unmounted.
Parameters
-
pair
[S, (Dispatch<A> | DispatchWithoutAction)] the state and dispatcher pair which will be patchedpair.0
pair.1
Returns [S, D] a state value and safe dispatcher pair
useStableArray
Hook to create an array with stable identity if its elements are equal.
Parameters
-
array
T the array -
compare
function (a: T, b: T): boolean the equality function that checks if two array elements are equal (optional, defaultObject.is
)
Returns T the passed array if the elements are NOT equals; the previously stored array otherwise
useLocalStorage
Hook to deal with localStorage
Parameters
-
key
the key associated to the value in the storage -
initialValue
the value returned when the key is not found at the storage
Returns any a state and a setter function
useSessionStorage
Hook to deal with sessionStorage
Parameters
-
key
the key associated to the value in the storage -
initialValue
the value returned when the key is not found at the storage
Returns any a state and a setter function
useToggle
Hook to create a toggleable boolean state.
Parameters
-
initialValue
(boolean | function (): boolean)? the initial value or the initial state generator function
Returns [boolean, D] a state boolean value and a state toggler function
useUniqueId
Hook to keep a unique ID string.
Returns string the unique ID string