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.

import { useTextContent } from '@sproutsocial/racine'
() => {
const textContainer = useTextContent('')
return (
<Box>
<Box
ref={textContainer}
p={350}
border={500}
borderColor="container.border.base"
borderRadius="outer"
mb={450}
>
This box contains text, as well as{' '}
<Text fontWeight="semibold">nested React components</Text>.
</Box>
<Text as="div">
Text content: <code>{textContainer.current}</code>
</Text>
</Box>
)
}
NameTypeDefaultDescriptionRequired?
initialstring

useInteractiveColor

Use this hook to lighten or darken a color dynamically based on the theme's mode (light or dark). This can be useful to add a hover or active state to a component when there are no interactive states defined.

import { useInteractiveColor } from '@sproutsocial/racine'
() => {
const MyBox = styled(Box)`
background-color: ${ ({ theme }) => theme.colors.container.background.error };
border: 1px solid;
border-color: ${ ({ theme }) => theme.colors.container.border.error };
width: 100%;
display: flex;
align-items: center;
border-radius: ${ ({ theme }) => theme.radii.outer };
padding: ${({ theme }) => theme.space[300]};
&:hover {
background-color: ${ ({ theme }) => useInteractiveColor(theme.colors.container.background.error) };
}
}
`
return (
<MyBox>
<Text fontWeight="semibold">Hover me</Text>
</MyBox>
)
}

Note: This hook will only work inside of a ThemeProvider component.

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. Primarily used with .

import { visuallyHidden } from '@sproutsocial/racine'
const VisuallyHiddenBox = styled(Box)`
${visuallyHidden}
`