Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/javadbat/jb-pin-input-react
https://github.com/javadbat/jb-pin-input-react
Last synced: 7 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/javadbat/jb-pin-input-react
- Owner: javadbat
- License: mit
- Created: 2022-10-10T19:59:29.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-13T21:36:28.000Z (2 months ago)
- Last Synced: 2024-12-09T13:01:12.130Z (13 days ago)
- Language: TypeScript
- Size: 10.7 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# JBPinInput React component
this component is React.js wrapper for [jb-pin-input](https://www.npmjs.com/package/jb-pin-input) web component with these benefits:
- smart paste algorithm
- mobile freindly
- light and fast
- support typescript
- accept persian & arabic number char
sample in codepen:
sample in github:
## install
run following command to install it with npm
```cmd
npm i jb-pin-input-react
```
## usage
just import the package and use it like other react component
```jsx
import {JBPinInput} from 'jb-pin-input-react'
```
## char length
if you want to change the pin length to 5digit or 10 digit or anything elese you just have to provide ti to charLength Prop
```jsx
```
## autofocus
if you want pin input get focus as rendered in app just add autofocus props
```jsx
```
### set custome style
in some cases in your project you need to change defualt style of web-component for example you need zero margin or different border-radius and etc.
if you want to set a custom style to this web-component all you need is to set css variable in parent scope of web-component
| css variable name | description |
| ------------- | ------------- |
| --jb-pin-input-inputs-wrapper-width | width of inputs wrapper,default is `100%` |
| --jb-pin-input-bottom-line-color | color of bottom line of each number. default value is `#9DA6B6` |
| --jb-pin-input-bottom-line-border-radius | border radius of bottom line. default value is `16px` |
| --jb-pin-input-bottom-line-height | height of bottom line of each number. default value is `4px` |
| --jb-pin-input-bottom-line-display | display of bottom line of each number. default value is `block` |
| --jb-pin-input-bottom-line-color-active | color of bottom line of each number when user focus on it. default value is `#1565D8` |
| --jb-pin-input-wrapper-border-width | border width of each number input wrapper. default value is `0` |
| --jb-pin-input-wrapper-border-color | border color of each number input wrapper. default value is `black` |
| --jb-pin-input-wrapper-border-style | border style of each number input wrapper. default value is `solid` |
| --jb-pin-input-wrapper-border-color-active | border color of each number input wrapper when user focus on it. default value is `#1565D8` |
| --jb-pin-input-pin-color | color of inputed text.default value is #333 |
| --jb-pin-input-pin-height | height of each number input. default value is `40px` |
| --jb-pin-input-pin-font-size | font size of each number input. default value is `24` |
| --jb-pin-input-pin-font-weight | font weight of each number input. default value is `900` |
| --jb-pin-input-wrapper-box-shadow | border width of each number input wrapper. default value is `none` |
| --jb-pin-input-error-message-margin | margin of error message. default value is `0` |
| --jb-pin-input-error-message-color | color of error message. default value is `#dc3545` |