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.

Code block

useSystemTheme

Detects user's system theme preference for dark or light mode.

Code block

useSize

Returns the current HTML Element size by creating a resize osberver for the target element.

Code block

useTheme

Provides the current active Theme object.

Code block

useClipboard

Handles value copy to clipboard and returns a copied status that will timeout

Code block

useLineCount

Hook to count the number of lines in an HTML element.

Code block

useForkRef

A hook that can combine two refs(mutable or callbackRefs) into a single callbackRef.

Code block

useAutoWidth

Matches an input element's width with its value's visual width. Placeholder value is used as a fallback if value is empty.

Code block

usePopover

Provides functionallity for displaying a Popover component, see http://design-system.sema4.ai/component/popover for usage examples

Code block

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.

Code block