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'
NameTypeDefaultDescriptionRequired?
initialValuestring
onChange(value: string) => ()

useMultiselect

A convenience hook for managing multiple selections. Primarily used with

import { useMultiselect } from '@sproutsocial/racine'
NameTypeDefaultDescriptionRequired?
initialValueArray<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.

This box contains text, as well as nested React components.
Text content:
import { useTextContent } from '@sproutsocial/racine'
NameTypeDefaultDescriptionRequired?
initialstring

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}
`