{"repo":"soywod/react-pin-field","free":true,"listed":false,"github":"https://github.com/soywod/react-pin-field","clone":"git clone https://github.com/soywod/react-pin-field.git","description":"📟 React component for entering PIN codes.","language":"TypeScript","stars":418,"topics":["react","component","field","pin","code","typescript","input"],"license":"MIT","category":"ui-components","readme_excerpt":"📟 React PIN Field React component for entering PIN codes Live demo available at . Features - Written in TypeScript, tested with Jest and Cypress - Relies on onchange native event with minimum interaction for better browser compatibility - Supports HTML dir left-to-right and right-to-left - Supports HTML autofocus by focusing either the first or the last input, depending on dir - Supports ARIA attributes like aria-required , aria-label … - Supports key composition Installation Usage Props length The length of the PIN field, which represents the number of inputs. Defaults to 5 format Characters can be formatted with any function of type (char: string) = string . Defaults to identity function char = char formatAriaLabel This function is used to generate accessible labels for each input within the . By default it renders the string PIN field 1 of 6 , PIN field 2 of 6 , etc., depending on the actual index of the input field and the total length of the pin field. You can customize the aria-label string by passing your own function. This can be useful for: i) site internationalisation (i18n); ii) simply describing each input with different semantics than the ones provided by react-pin-field . Defaults to (n, total) = \"PIN field ${n} of ${total}\" onChange This function is called everytime the PIN field changes its value. onComplete This function is called everytime the PIN field is completed. A PIN field is considered complete when: - Every input has a defined value - Every input pa","default_branch":null,"files":null,"tree":[],"storefront":"/r/soywod","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/soywod/react-pin-field/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}