react-pinco
A fully customizable, pincode password input component for the web built with React.
Installation
To install the latest stable version:
npm install --save react-pinco
Basic usage:
;; state = otp: ; this; { return <div> <PincodeInput onChange=thishandleChange numInputs=6 separator=<span>-</span> /> </div> ; }
API
Name |
Type | Required | Default | Description |
---|---|---|---|---|
numInputs | number | true | 4 | Number of pincode inputs to be rendered. |
value | array of string | array | [] | The value of the pincode passed into the component. |
initialValue | array of string | false | [] | If you want to start with a initial value. Example ['1', '2', '3', '4'] |
clear | boolean | false | false | If you want to clear pincode value |
onChange | function | true | console.log | Returns pincode typed in inputs. |
separator | component |
false | none | Provide a custom separator between inputs by passing a component. For instance, <span>-</span> would add - between each input |
containerStyle | style (object) / className (string) | false | none | Style applied or class passed to container of inputs. |
inputStyle | style (object) / className (string) | false | none | Style applied or class passed to each input. |
focusStyle | style (object) / className (string) | false | none | Style applied or class passed to inputs on focus. |
isDisabled | boolean | false | false | Disables all the inputs. |
disabledStyle | style (object) / className (string) | false | none | Style applied or class passed to each input when disabled. |
hasErrored | boolean | false | false | Indicates there is an error in the inputs. |
errorStyle | style (object) / className (string) | false | none | Style applied or class passed to each input when errored. |
shouldAutoFocus | boolean | false | false | Auto focuses input on initial page load. |
isInputNum | boolean | false | false | Restrict input to only numbers. |
Development
To run the development server:
npm run dev
To run the development server for example:
npm run docs
To make a production build of the example:
npm run docs:prod
Contributing
Feel free to open issues and pull requests!
License
MIT