Have ideas to improve npm?Join in the discussion! »

@rocket.chat/fuselage-hooksTypeScript icon, indicating that this package has built-in type declarations

0.20.1 • Public • Published

Rocket.Chat

@rocket.chat/fuselage-hooks

React hooks for Fuselage, Rocket.Chat's design system and UI toolkit.

React version License: MIT

Issues Pull requests GitHub commit activity

npm@latest npm@next dev deps optional deps peer deps npm bundle size npm downloads npm collaborators

Example

Install

yarn add @rocket.chat/fuselage-hooks

API Reference

Table of Contents

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

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

Install

npm i @rocket.chat/fuselage-hooks

DownloadsWeekly Downloads

1,370

Version

0.20.1

License

MIT

Unpacked Size

199 kB

Total Files

38

Last publish

Collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar