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

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.

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