@os-design/utils

@os-design/utils

Utils and hooks used in os-design.

1. ErrorBoundary – The Error Boundary component. Fully supports Relay (useQueryLoader/loadQuery, useLazyLoadQuery).
2. isTouchDevice – Detects whether the client device is touch-enabled.
3. omitEmotionProps – Disables forwarding the specified properties to the element.
4. useAutoScroll – Auto scrolls if the cursor is near the border of the scrollable element. It works on both mouse and touch devices.
5. useBodyScroll – Enables or disables scrolling of the body element.
6. useBrowserLayoutEffect – Mocks the useLayoutEffect on the server side.
7. useClickOutside – Sets the listener that will be called when the click event occurs outside the target element.
8. useClosable – Sets the closed state to true after a delay to apply the fade out animation.
9. useCursorPosition – Returns the position of the cursor. It works on both mouse and touch devices.
10. useDebounce – The callback function will be called only when N ms has elapsed after the last call attempt.
11. useDrag – Handles the drag gesture. On touch devices, the event is triggered by a long press. Otherwise, when you click on the element and start dragging it.
12. useEvent – Sets the listener that will be called whenever the specified event occurs.
13. useFontSize – Computes the font size of the element.
14. useForwardedRef – Allows to use the forwardedRef.
15. useForwardedState – Uses the inner state if the passed value is undefined.
16. useInterval – The hook to use the setInterval function.
17. useKeyPress – Sets the listener that will be called whenever the key down event occurs.
18. useLongPress – Sets the listener that will be called whenever the long press event occurs. It only works on touch devices.
19. useMemoObject – Reuse the previous version of an object value unless it has changed.
20. usePreventDefaultEvent – Prevents the default action of the specified event.
21. usePrevious – Returns the previous value.
22. useResizeObserver – Sets the listener that will be called whenever the resize event of an element occurs.
23. useSafeAreaInset – Calculates the safe area inset.
24. useSize – Returns the width and height of the container. By default, the container is window.
25. useSwipe – Allows you to implement the swipe gesture in any container. It only works on touch devices.
26. 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.
27. 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.