{"id":13469605,"url":"https://github.com/leonardodino/rci","last_synced_at":"2025-05-14T07:08:31.042Z","repository":{"id":40420079,"uuid":"415674064","full_name":"leonardodino/rci","owner":"leonardodino","description":"🔢 better code inputs for react/web","archived":false,"fork":false,"pushed_at":"2025-01-09T13:33:38.000Z","size":178,"stargazers_count":904,"open_issues_count":1,"forks_count":16,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-04-13T17:46:36.820Z","etag":null,"topics":["2fa","a11y","code-input","hacktoberfest","headless-ui","input","react","totp","ui"],"latest_commit_sha":null,"homepage":"https://rci.netlify.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/leonardodino.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-10-10T18:56:42.000Z","updated_at":"2025-03-19T20:55:39.000Z","dependencies_parsed_at":"2024-01-15T20:49:18.060Z","dependency_job_id":"411263c3-9d1c-4d2d-b450-dfbd3bb0273b","html_url":"https://github.com/leonardodino/rci","commit_stats":{"total_commits":24,"total_committers":7,"mean_commits":"3.4285714285714284","dds":"0.45833333333333337","last_synced_commit":"7d86284526f35e2e01b6b1bb5bb68c9925c3e9b0"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leonardodino%2Frci","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leonardodino%2Frci/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leonardodino%2Frci/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leonardodino%2Frci/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/leonardodino","download_url":"https://codeload.github.com/leonardodino/rci/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254092776,"owners_count":22013290,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["2fa","a11y","code-input","hacktoberfest","headless-ui","input","react","totp","ui"],"created_at":"2024-07-31T15:01:46.556Z","updated_at":"2025-05-14T07:08:31.019Z","avatar_url":"https://github.com/leonardodino.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","input"],"sub_categories":[],"readme":"# `rci` \u003csub\u003e\u003csup\u003e\u003csub\u003e\"react code input\"\u003c/sub\u003e\u003c/sup\u003e\u003c/sub\u003e\n\nbetter segmented code inputs for the web. **primary goals**:\n\n- improved accessibility\n- operating system integration\n- consistent, cross-platform, experience\n\n## Compared\n\n| ![img-single-input] | ![img-multi-input] | ![img-rci] |\n| :-----------------: | :----------------: | :--------: |\n|    regular input    |    multi-input     |    rci     |\n\n\u003ckbd\u003erci\u003c/kbd\u003e 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.\n\nusing 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.\n\n**using a single input** (\u003ckbd\u003erci\u003c/kbd\u003e approach) allows for:\n\n- native keyboard shortcuts and selection (including selecting multiple segments)\n- [:sparkles:`autocomplete` magic:sparkles:](https://www.twilio.com/blog/html-attributes-two-factor-authentication-autocomplete#:~:text=autocomplete%3D%22one-time-code%22)\n- improved accessibility (`\u003clabel\u003e`, `tabIndex`, `minLength/maxLength`, etc)\n\n## Demo\n\nhttps://rci.netlify.app (code [here](https://github.com/leonardodino/rci/blob/main/apps/demo/src/Example.tsx), uses tailwind)\n\n(for vanilla css, see the [codesandbox](https://codesandbox.io/s/rci-codeinput-812up?file=/src/Example.tsx). a nice starter for CSS Modules usage)\n\n## Packages\n\nThis repository hosts a few npm packages, the most relevant ones being:\n\n- [`use-code-input`](./packages/use-code-input): low-level hook handling selection via ref\n- [`rci`](./packages/rci): [opinionated](#caveats) component (`CodeInput`) built on top of `use-code-input`\n\nmost users will be better served by using \u003ckbd\u003erci\u003c/kbd\u003e, as the internals of this component won't vary much from app to app.\n\nthe hook package is intended for usage only in design system projects which wish to retain absolute control of rendered DOM elements.\n\n## Styling\n\npackages in this repo don't bundle any built-in style, besides the base minimum for it to function (zIndex, positioning, etc).\n\nfor styling all elements rendered by `CodeInput` have a dedicated `className` prop:\n\n- `className`\n- `inputClassName`\n- `scrollWrapperClassName`\n- `segmentWrapperClassName`\n\n## Bundle size\n\ndespite not being part of the primary goals, weight is heavily considered while developing.\n\n| package                                                      | size                                                                                                          |\n| :----------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------ |\n| [`rci`](https://npmjs.com/package/rci)                       | [![](https://badgen.net/bundlephobia/minzip/rci)](https://bundlephobia.com/package/rci)                       |\n| [`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) |\n| [`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) |\n\n## Caveats\n\nthere's currently no support for displaying separators between sequences (example: `___-___`).\n\nfor 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.\nthis 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.\nfor alphanumeric values the font must be monospaced.\n\nthis project is still pending a thorough a11y validation.\nfor cases in which accessibility is paramount, please use a simple native single input.\n\n\u003c!-- links --\u003e\n\n[img-single-input]: https://user-images.githubusercontent.com/8649362/136673697-c51a167f-444e-40cc-b5f6-eafae575e803.png 'Single Input'\n[img-multi-input]: https://user-images.githubusercontent.com/8649362/136673699-b39fbd58-b5eb-424f-a0b0-3ff8113200b0.png 'Multiple Input'\n[img-rci]: https://user-images.githubusercontent.com/8649362/136673700-bd227d9c-9919-49d6-ae92-bbbef7882365.png 'RCI'\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleonardodino%2Frci","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleonardodino%2Frci","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleonardodino%2Frci/lists"}