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'

useMultiselect

A convenience hook for managing multiple selections. Primarily used with

import { useMultiselect } from '@sproutsocial/racine'

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.

() => {
  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>
  )
}

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