@os-design/utils

@os-design/utils

Utils and hooks used in os-design.

1. isTouchDevice – Detects whether the client device is touch-enabled.
2. useBodyScroll – Enables or disables scrolling of the body element.
3. useBrowserLayoutEffect – Mocks the useLayoutEffect on the server side.
4. useClickOutside – Sets the listener that will be called when the click event occurs outside the target element.
5. useClosable – Sets the closed state to true after a delay to apply the fade out animation.
6. useDebounce – The callback function will be called only when N ms has elapsed after the last call attempt.
7. useEvent – Sets the listener that will be called whenever the specified event occurs.
8. useFontSize – Computes the font size of the element.
9. useForwardedRef – Allows to use the forwardedRef.
10. useForwardedState – Uses the inner state if the passed value is undefined.
11. useKeyPress – Sets the listener that will be called whenever the key down event occurs.
12. usePrevious – Returns the previous value.
13. usePropRef – Prevents re-rendering when the value changes.
14. useResizeObserver – Sets the listener that will be called whenever the resize event of an element occurs.
15. useSafeAreaInset – Calculates the safe area inset.
16. useSize – Returns the width and height of the container. By default, the container is window.
17. 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.
18. useVh – Sets the --vh css variable.

Installation

Install the package using the following command:

yarn add @os-design/utils

---

See all the features in the Storybook.