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

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

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.

useDebounce

Delay the execution of function or state update with useDebounce