Components
Utilities
Build a great experience even faster with these useful tools and helpers.
Hooks
useSelect
A convenience hook for managing selections which can be used with components such as and
import { useSelect } from '@sproutsocial/racine'
Name | Type | Default | Description | Required? |
---|---|---|---|---|
initialValue | string | |||
onChange | (value: string) => () |
useMultiselect
A convenience hook for managing multiple selections. Primarily used with
import { useMultiselect } from '@sproutsocial/racine'
Name | Type | Default | Description | Required? |
---|---|---|---|---|
initialValue | Array<string> | |||
onChange | (value: Array<string>) => () |
useTextContent
A convenience hook for reading the textContent
property of a React component’s node. This can be useful for setting QA selectors and other attributes to the text of a component that contains other nested components.
import { useTextContent } from '@sproutsocial/racine'
Name | Type | Default | Description | Required? |
---|---|---|---|---|
initial | string |
Mixins
disabled
Used to apply our standard disabled styles. You must also be sure to disable any interactivity in your code such as click handlers.
import { disabled } from '@sproutsocial/racine'
const DisabledBox = styled(Box)` ${disabled}`
focusRing
Used to apply our standard focus ring styles to an interactive element.
import { focusRing } from '@sproutsocial/racine'
const FocusableElement = styled.button` :focus { ${focusRing} }`
visuallyHidden
Used to visually hide elements on the screen while ensuring they are still visible to screen readers and other assistive technology.
import { visuallyHidden } from '@sproutsocial/racine'
const VisuallyHiddenBox = styled(Box)` ${visuallyHidden}`