{"repo":"luffy84217/react-input-pin-code","free":true,"listed":false,"github":"https://github.com/luffy84217/react-input-pin-code","clone":"git clone https://github.com/luffy84217/react-input-pin-code.git","description":"An accessible and simple pin input component for ReactJS.","language":"TypeScript","stars":27,"topics":["input","react","component","components","react-components","pincode"],"license":"MIT","category":"ui-components","readme_excerpt":"React Input Pin Code An accessible and simple pin input component for ReactJS. Demo Here to see documentation and examples. Source code at https://github.com/luffy84217/react-input-pin-code. Installation To get started, install and save in your package.json dependencies, run: or Importing You can use the following two ways to import module. Usage Basic Example Filling one character at a time for each input. When a character is entered, the focus transfers to the next input automatically in the sequence until all inputs are filled in. Here is the explanation of behavior below: You can fill in only one character per input. To overwrite the value of an input, you donʼt need to select the text in the input. If you type a digit while the input is focused, the input will update. Pressing Backspace when it is empty in the input will move focus to the previous input (if any) and clear the value of. Pin input length PinInput expects an array of strings for the values prop. The number of input fields rendered is equal to the length of the array. Passing id, className and name You can pass id or name or containerClassName or inputClassName prop.ClassName and name will be shared amongst the inputs, which means they will each have their name set to this value, it is comfortable for the use of pseudo element in global.css file. id will append an index to any string you provide and pass to the corresponding input. For example, if you pass foo as id and bar as name and there are four inputs,","default_branch":null,"files":null,"tree":[],"storefront":"/r/luffy84217","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/luffy84217/react-input-pin-code/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."}