Character Counter

Components

Character Counter

Code
Usage

Character Counter is a flexible utility component used to tally the remaining number of text characters available for input.

import { CharacterCounter } from '@sproutsocial/racine'

<Box display='flex' justifyContent='center' alignItems='center'>
  <CharacterCounter
    currentValue={295}
    maxValue={300}
    mr={600}
  />

  <CharacterCounter
    currentValue={350}
    maxValue={300}
  />
</Box>

Properties

Name	Type	Description
`currentValue`	`number`	Current value of relative input/textarea
`maxValue`	`number`	Max amount of characters for input/textarea
`size`	`\| "default"` `\| "mini"`
`mode`	`\| "countdown"` `\| "countup"`	Display mode. "countdown" shows characters remaining (maxValue - currentValue), which goes negative once the limit is exceeded. "countup" shows currentValue as-is. Defaults to "countdown".