Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/leonardodino/rci

🔢 better code inputs for react/web
https://github.com/leonardodino/rci

2fa a11y code-input hacktoberfest headless-ui input react totp ui

Last synced: 15 days ago
JSON representation

🔢 better code inputs for react/web

Host: GitHub
URL: https://github.com/leonardodino/rci
Owner: leonardodino
License: mit
Created: 2021-10-10T18:56:42.000Z (about 3 years ago)
Default Branch: main
Last Pushed: 2023-04-07T15:22:32.000Z (over 1 year ago)
Last Synced: 2024-10-01T18:46:50.541Z (about 1 month ago)
Topics: 2fa, a11y, code-input, hacktoberfest, headless-ui, input, react, totp, ui
Language: TypeScript
Homepage: https://rci.netlify.app
Size: 176 KB
Stars: 901
Watchers: 6
Forks: 16
Open Issues: 3
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        # `rci` _{^{_{"react code input"}}}

better segmented code inputs for the web. **primary goals**:

- improved accessibility

- operating system integration

- consistent, cross-platform, experience

## Compared

| ![img-single-input] | ![img-multi-input] | ![img-rci] |

| :-----------------: | :----------------: | :--------: |

|    regular input    |    multi-input     |    rci     |

rci uses a single DOM input element, overlayed on top of plain `div`s for styling. most other implementations of this pattern are based on multiple inputs.

using multiple inputs gives out-of-the-box style consistency, but comes with the disadvantage of JavaScript hacks to deal with focus shifting and pasting, and accessibility issues.

**using a single input** (rci approach) allows for:

- native keyboard shortcuts and selection (including selecting multiple segments)

- [:sparkles:`autocomplete` magic:sparkles:](https://www.twilio.com/blog/html-attributes-two-factor-authentication-autocomplete#:~:text=autocomplete%3D%22one-time-code%22)

- improved accessibility (``, `tabIndex`, `minLength/maxLength`, etc)

## Demo

https://rci.netlify.app (code [here](https://github.com/leonardodino/rci/blob/main/apps/demo/src/Example.tsx), uses tailwind)

(for vanilla css, see the [codesandbox](https://codesandbox.io/s/rci-codeinput-812up?file=/src/Example.tsx). a nice starter for CSS Modules usage)

## Packages

This repository hosts a few npm packages, the most relevant ones being:

- [`use-code-input`](./packages/use-code-input): low-level hook handling selection via ref

- [`rci`](./packages/rci): [opinionated](#caveats) component (`CodeInput`) built on top of `use-code-input`

most users will be better served by using rci, as the internals of this component won't vary much from app to app.

the hook package is intended for usage only in design system projects which wish to retain absolute control of rendered DOM elements.

## Styling

packages in this repo don't bundle any built-in style, besides the base minimum for it to function (zIndex, positioning, etc).

for styling all elements rendered by `CodeInput` have a dedicated `className` prop:

- `className`

- `inputClassName`

- `scrollWrapperClassName`

- `segmentWrapperClassName`

## Bundle size

despite not being part of the primary goals, weight is heavily considered while developing.

| package                                                      | size                                                                                                          |

| :----------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------ |

| [`rci`](https://npmjs.com/package/rci)                       | [![](https://badgen.net/bundlephobia/minzip/rci)](https://bundlephobia.com/package/rci)                       |

| [`use-code-input`](https://npmjs.com/package/use-code-input) | [![](https://badgen.net/bundlephobia/minzip/use-code-input)](https://bundlephobia.com/package/use-code-input) |

| [`use-is-focused`](https://npmjs.com/package/use-is-focused) | [![](https://badgen.net/bundlephobia/minzip/use-is-focused)](https://bundlephobia.com/package/use-is-focused) |

## Caveats

there's currently no support for displaying separators between sequences (example: `___-___`).

for simplicity of implementation and to reduce the amount of CSS the user needs to provide, this component assumes a font with fixed advances for the characters accepted.

this means using a [monospaced](https://en.wikipedia.org/wiki/Monospaced_font) or [tabular lining](https://www.fonts.com/content/learning/fontology/level-3/numbers/proportional-vs-tabular-figures) font for numeric values.

for alphanumeric values the font must be monospaced.

this project is still pending a thorough a11y validation.

for cases in which accessibility is paramount, please use a simple native single input.

[img-single-input]: https://user-images.githubusercontent.com/8649362/136673697-c51a167f-444e-40cc-b5f6-eafae575e803.png 'Single Input'

[img-multi-input]: https://user-images.githubusercontent.com/8649362/136673699-b39fbd58-b5eb-424f-a0b0-3ff8113200b0.png 'Multiple Input'

[img-rci]: https://user-images.githubusercontent.com/8649362/136673700-bd227d9c-9919-49d6-ae92-bbbef7882365.png 'RCI'