Add separator support

[cliffordrice3]

Description

Adds support for separators such as hyphens, colons, commas, etc. between input items.

Useful for when the verification code in question has a format (e.g. 000-00-0000) that will help the user easily visually verify the correctness of the code.

Examples

Test Coverage

Maintains 100% coverage

[cliffordrice3]

FWIW, can manage this w/ CSS, but it feels pretty hacky.

Open to other separator handling strategies (e.g. an alternative to length that is grouped lengths={[3, 2, 4]}, a config string format={'XXX-XX-XXXX'}, etc. etc.), but feels like this should have first-class support in the library. Let me know if there's a preferred way & I can make the changes

[sbking]

Does this allow pasting input that has separators in the copied text?

[cliffordrice3]

@sbking not currently, but good question.

On that note- what should the desired value be for inputs w/ separators. i.e. should 123-456 yield 123456 or 123-456 (I think 123-456 actually, as it's easier for the caller to strip out the separators as needed rather than add them in). Possibly could add another prop to include the separators in the value or not?

Can also add some UX handling for the user manually keying in a separator (e.g. user hits - in a box that follows a separator, ignore the input)

I'll do another pass at this by EOW to add support