characterCount
Why JS.
import { characterCount } from "@sdxc/ui/mixins";Usage
Applied to a CharacterCount's host: follows the field named by for, and on every
input sets the host's data-state and --ui-character-count-progress, writes the number
left into [data-character-count-number], and announces a change of state only, so a screen
reader hears "20 characters left" once rather than at every key.
Signature
characterCount(options: CharacterCountSync.Options): MixinDescriptor<HTMLElement>Parameters
| Parameter | Type | Required | Description |
|---|---|---|---|
options | CharacterCountSync.Options | Yes |
Examples
<span mix={[characterCount({ for: "draft", max: 280, warn: 20, holdSubmit: true, labels })]} />Used with it
The events, constants and types its module publishes, each imported from @sdxc/ui/mixins too.
countCharacters
Counts what a reader sees as characters: grapheme clusters, so an emoji with skin tone or a flag counts once. A server checking the same limit calls this, so the two never disagree.
countCharacters(text: string): number| Parameter | Type | Required | Description |
|---|---|---|---|
text | string | Yes | The field's text. |
characterCountState
Places a length against its limit.
characterCountState(length: number, max: number, warn: number): CharacterCountState| Parameter | Type | Required | Description |
|---|---|---|---|
length | number | Yes | The characters typed. |
max | number | Yes | The limit. |
warn | number | Yes | How many characters left start the warning. |
isRingHidden
Whether a count is far enough over its limit to show the number alone.
isRingHidden(left: number): boolean| Parameter | Type | Required | Description |
|---|---|---|---|
left | number | Yes | Characters left; negative past the limit. |
CharacterCountSync.Options
Configuration for characterCount.
| Member | Type | Required | Description |
|---|---|---|---|
for | string | Yes | The id of the field counted. |
max | number | Yes | |
warn | number | Yes | How many characters left show the number. |
holdSubmit | boolean | Yes | Disables the field's form's submit buttons while it is empty or over the limit. |
labels | { remaining: string; over: string } | Yes | Announcements, with {count} replaced by the characters left or over. |
CharacterCountState
Where a field stands against its limit, which the count's data-state carries.
type CharacterCountState = "empty" | "ok" | "warn" | "over"