@os-design/utils NPM

@os-design/utils

Utils and hooks used in os-design.

ErrorBoundary – The Error Boundary component. Fully supports Relay (useQueryLoader/loadQuery, useLazyLoadQuery).
isTouchDevice – Detects whether the client device is touch-enabled.
omitEmotionProps – Disables forwarding the specified properties to the element.
useAutoScroll – Auto scrolls if the cursor is near the border of the scrollable element. It works on both mouse and touch devices.
useBodyScroll – Enables or disables scrolling of the body element.
useBrowserLayoutEffect – Mocks the useLayoutEffect on the server side.
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.
useCursorPosition – Returns the position of the cursor. It works on both mouse and touch devices.
useDebounce – The callback function will be called only when N ms has elapsed after the last call attempt.
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.
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.
useInterval – The hook to use the setInterval function.
useKeyPress – Sets the listener that will be called whenever the key down event occurs.
useLongPress – Sets the listener that will be called whenever the long press event occurs. It only works on touch devices.
useMemoObject – Reuse the previous version of an object value unless it has changed.
usePreventDefaultEvent – Prevents the default action of the specified event.
usePrevious – Returns the previous value.
useResizeObserver – Sets the listener that will be called whenever the resize event of an element occurs.
useSafeAreaInset – Calculates the safe area inset.
useSize – Returns the width and height of the container. By default, the container is window.
useSwipe – Allows you to implement the swipe gesture in any container. It only works on touch devices.
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.