Utilities

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.

This box contains text, as well as nested React components.

Text content:

import { useTextContent } from '@sproutsocial/racine'

() => {
  const textContainer = useTextContent('')

  return (
    <Box>
      <Box
        ref={textContainer}
        p={350}
        border={500}
        borderColor="border"
        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>
  )
}

() => {
  const textContainer = useTextContent('')
  return (
    <Box>
      <Box
        ref={textContainer}
        p={350}
        border={500}
        borderColor="border"
        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>
  )
}

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