@os-design/utils

@os-design/utils

Additional utils and hooks used in os-design.

• isTouchDevice – Detects whether the client device is touch-enabled.
• useBodyScroll – Enables or disables scrolling of the body element.
• useClickOutside – Sets the listener that will be called when the click event occurs outside the target element.
• useClosable – Sets the closed state to true after a delay to apply the fade out animation.
• useDebounce – The callback function will be called only when N ms has elapsed after the last call attempt.
• useEvent – Sets the listener that will be called whenever the specified event occurs.
• useFontSize – Computes the font size of the element.
• useForwardedRef – Allows to use the forwardedRef.
• useForwardedState – Uses the inner state if the passed value is undefined.
• useKeyPress – Sets the listener that will be called whenever the key down event occurs.
• usePrevious – Returns the previous value.
• usePropRef – Prevents re-rendering when the value changes.
• useResizeObserver – Sets the listener that will be called whenever the resize event of an element occurs.
• useSafeAreaInset – Calculates the safe area inset.
• useThrottle – The callback function will be called no more than once during the N ms, even if it is called many times during that period.
• useVh – Sets the --vh css variable.
• useWindowSize – Returns the width and height of the window.

Installation

Install the package using the following command:

yarn add @os-design/utils

---

See all the features in the Storybook.