Welcome to @rocket.chat/fuselage-hooks 👋

React Hooks for Fuselage, Rocket.Chat's design system

🏠 Homepage

Install

yarn add @rocket.chat/fuselage-hooks

Run tests

yarn test

API Reference

Table of Contents

• useClassName
  • Parameters
• useDebouncedUpdates
  • Parameters
• useDebouncedReducer
  • Parameters
• useDebouncedState
  • Parameters
• useDebouncedCallback
  • Parameters
• useExclusiveBooleanProps
  • Parameters
• useMediaQuery
  • Parameters
• useMergedRefs
  • Parameters
• useToggle
  • Parameters

useClassName

Hook to generate a BEM-compatible className value for a component.

Parameters

• componentClassName string the style class which identifies the component
• modifiers Object the modifiers applied to the style class (optional, default {})
• classNames ...Array<string> the additional style classes appended to the className

Returns string a BEM-compatible className in the format (<block>|<block>__<element>) [...(<block>--<modifier>|<block>__<element>--<modifier>)] [...classNames]

useDebouncedUpdates

Hook to debounce the state updater function returned by hooks like useState() and useReducer().

Parameters

• pair [any, function (): any] the state and updater pair which will be debounced
  • pair.0 the state value
  • pair.1 the state updater function
• delay number the number of milliseconds to delay the updater

Returns any a state value and debounced updater pair

useDebouncedReducer

Hook to create a reduced state with a debounced dispatch() function.

Parameters

• reducer function (any, any): any the reducer function
• initializerArg any the initial state value or the argument passed to the initial state generator function
• initializer function (any): any the initial state generator function
• delay number the number of milliseconds to delay the updater

Returns any a state and debounced dispatch() function

useDebouncedState

Hook to create a state with a debounced setter function.

Parameters

• initialValue (any | function (): any) the initial state value or the initial state generator function
• delay number the number of milliseconds to delay the updater

Returns any a state and debounced setter function

useDebouncedCallback

Hook to memoize a debounced version of a callback.

Parameters

• callback function (): any the callback to debounce
• delay number the number of milliseconds to delay
• deps Array<any>? the hook dependencies

Returns function (): any a memoized and debounced callback

useExclusiveBooleanProps

Hook for asserting mutually exclusive boolean props. Useful for components that use boolean props to choose styling variants.

Parameters

• props Object the mutually exclusive boolean props

• Throws any if two or more booleans props are set as true

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<any>> the refs and callback refs that should be merged

Returns any a merged callback ref

useToggle

Hook to create a toggleable boolean state.

Parameters

• initialValue (any | function (): any) the initial value or the initial state generator function

Returns any a state boolean value and a state toggler function

Author

👤 Rocket.Chat

• Twitter: @RocketChat
• Github: @RocketChat

🤝 Contributing

Contributions, issues and feature requests are welcome!

Feel free to check issues page.

Show your support

Give a ⭐️ if this project helped you!

This README was generated with ❤️ by readme-md-generator