@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
  • Parameters
• useBreakpoints
• useClipboard
  • Parameters
• useDebouncedCallback
  • Parameters
• useDebouncedReducer
  • Parameters
• useDebouncedState
  • Parameters
• useDebouncedUpdates
  • Parameters
• useDebouncedValue
  • Parameters
• useIsomorphicLayoutEffect
• useLazyRef
  • Parameters
• useMediaQueries
  • Parameters
• useMediaQuery
  • Parameters
• useMergedRefs
  • Parameters
• useMutableCallback
  • Parameters
• usePosition
  • Parameters
• usePrefersColorScheme
  • Parameters
• usePrefersReducedData
• usePrefersReducedMotion
• useResizeObserver
  • Parameters
• useSafely
  • Parameters
• useStableArray
  • Parameters
• useLocalStorage
  • Parameters
• useSessionStorage
  • Parameters
• useToggle
  • Parameters
• useUniqueId

useAutoFocus

Hook to automatically request focus for an DOM element.

Parameters

• isFocused if true, the focus will be requested (optional, default true)
• 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, default 2000)
  • $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 debounced
  • pair.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

• queries ...Array<string> the CSS3 expressions of media queries

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 patched
  • pair.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, default Object.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