Hooks
The Design System exposes some utility hooks that you may find useful when developing custom views or components. You can import each hook individually from the @sema4ai/ds library.
useViewport
Returns the current browser window width and height in pixels.
useSystemTheme
Detects user's system theme preference for dark or light mode.
useSize
Returns the current HTML Element size by creating a resize osberver for the target element.
useTheme
Provides the current active Theme object.
useClipboard
Handles value copy to clipboard and returns a copied status that will timeout
useLineCount
Hook to count the number of lines in an HTML element.
useForkRef
A hook that can combine two refs(mutable or callbackRefs) into a single callbackRef.
useAutoWidth
Matches an input element's width with its value's visual width. Placeholder value is used as a fallback if value is empty.
usePopover
Provides functionallity for displaying a Popover component, see http://design-system.sema4.ai/component/popover for usage examples
useScrollIndicators
Add visual indicator to the target element's previous or next element in case the scroll position is not final in that direction. Important – the target element needs a css `overflow` value of `auto` or `visible` defined.
useMediaQuery
Subscribes to media query changes
useScreenSize
Subscribes to media query changes based on theme screen size definitions
useLocalStorage
Read, set or update local storage entry. Changes will be synced between browser tabs if enabled.
useSessionStorage
Read, set or update session storage entry. Changes will be synced between browser tabs if enabled.
useResizeHandle
Hook to handle the resizing of a container
useDebounce
Delay the execution of function or state update with useDebounce