https://github.com/cuadros-code/react-code
https://github.com/cuadros-code/react-code
package react typescript
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/cuadros-code/react-code
- Owner: cuadros-code
- License: mit
- Created: 2022-07-07T15:12:26.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2022-07-07T17:11:35.000Z (almost 4 years ago)
- Last Synced: 2025-03-14T18:46:18.493Z (over 1 year ago)
- Topics: package, react, typescript
- Language: TypeScript
- Homepage: https://cuadros-code.github.io/react-code/
- Size: 2.21 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Pin Code
> Pin input component for React
## Installation
To get started, install and save in your `package.json` dependencies, run:
```bash
npm i @kevincuadros/react-code
```
or
```bash
yarn add @kevincuadros/react-code
```
## Demo
[Documentation and examples](https://cuadros-code.github.io/react-code/?path=/story/pin-code--default)
[Source code](https://github.com/cuadros-code/react-code)
## Importing
You can use the following two ways to import module.
```javascript
import { PinCode } from '@kevincuadros/react-code'
```
## Usage
### Basic Example
```jsx
import { PinCode } from '@kevincuadros/react-code';
const App = () => {
const [value, setValue] = React.useState('');
return (
);
};
```
## PinCode input length
`PinCode` expects a number for the `length` prop. The number of input fields rendered is equal to the length of the array.
## Disable focus management
By default, `PinCode` moves focus automatically to the next input once a field is filled. It also transfers focus to a previous input when `Backspace` is pressed with focus on an empty input.
## AutoFocus
`PinCode` offers a way let it focus from the start. Simply set `autoFocus` prop to **true** to focus the first input upon initial mounting of the component.
## Changing the placeholder
By default, `PinCode` placeholder is (''), you can change that if you want.
## Compare value
By default `valueToValidate` is (''), when all the fields are completed the value will be validated
## API
**`PinCode` Props**
| Name(*required) | Type | Default | Description |
| :-------------- | :--- | :------ | :---------- |
| length(*) | number | | Number of rendered elements. |
| autoFocus | boolean | false | If true the input will be focused on the first mount. |
| valueToValidate | string | "" | Value to compare |
| invalidBorderColor | string | rgb(220,53,69) | Let you customize border color when the input is invalid.
| validBorderColor | string | rgb(220,53,69) | Let you customize border color when the input is valid.
| onChange | Dispatch> | | Called when input value is changed. |
| placeholder | string | "" | Displayed when the pin code is not entered yet. |
| inputStyle | object | {} | Lets you customize input element. |
## License
MIT
[](https://luffy84217.github.io/react-input-pin-code/)