Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/javadbat/jb-payment-input-react
payment input react component
https://github.com/javadbat/jb-payment-input-react
Last synced: 7 days ago
JSON representation
payment input react component
- Host: GitHub
- URL: https://github.com/javadbat/jb-payment-input-react
- Owner: javadbat
- License: mit
- Created: 2022-09-11T09:23:13.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-11-12T13:59:55.000Z (about 1 month ago)
- Last Synced: 2024-11-12T14:47:54.164Z (about 1 month ago)
- Language: TypeScript
- Size: 24.4 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# JBPaymentInput React component
this component is React.js wrapper for [jb-payment-input](https://www.npmjs.com/package/jb-payment-input) web component
payment info input `react component` with this benefit:
- easy to add custom regex or function validation.
- multiple validation with different message.
- support both RTL and LTR.
- add label and message in UX friendly format.
- customizable ui with css variable so you can have multiple style in different scope of your app.
- support both card number and shaba number
Demo : Demo: [codeSandbox preview](https://3f63dj.csb.app/samples/jb-payment-input) for just see the demo and [codeSandbox editor](https://codesandbox.io/p/sandbox/jb-design-system-3f63dj?file=%2Fsrc%2Fsamples%2FJBPaymentInput.tsx) if you want to see and play with code
## install
### using npm
``` command
npm i jb-payment-input-react
```
in your jsx file
```js
import {JBPaymentInput} from 'jb-payment-input-react';
```
``` jsx
```
## events
- onChange
```jsx
console.log(event.target.value)}>
```
- onKeyUp
```jsx
console.log(event.target.value)}>
```
- onEnter
```jsx
//when user press Enter button
console.log(event.target.value)}>
```
- onKeydown
```jsx
console.log(event.target.value)}>
```
- onFocus
```jsx
console.log(event.target.value)}>
```
- onBlur
```jsx
console.log(event.target.value)}>
```
## set validation
you can set validation to your input by creating a validationList array and passing in to `validationList` props:
``` javascript
const validationList = [
{
validator: /.{3}/g,
message: 'عنوان حداقل باید سه کاکتر طول داشته باشد'
},
//you can use function as a validator too
{
validator: ({displayValue,value})=>{return value !== "50413731111111"},
message: 'this id card in banned'
},
{
validator: ({displayValue,value})=>{
if(value.startsWith('11111111')){
return 'we dont accept foo bank cards'
}
if(displayValue.startsWith('2222 2222')){
return 'we dont accept bar bank cards'
}
if(value.startsWith('3333')){
return false
}
return true
},
message: 'default message when return false'
},
]
```
```jsx
```
## check validation
you can check if an input value meet your validation standard by creating a ref of the element using `React.createRef()`.
```javascript
const elementRef = React.createRef();
const isValid = elementRef.current.validation.checkValidity(true).isAllValid;
```
if `isValid` is `true` the value of input is valid.
### separator (divider) string
payment input by default use space to separate part of card number or shaba number. for example it will show `1234123412341234` as `1234 1234 1234 1234` but you can change it to what char or even string you want for eample devide it by `-` and you will see `1234-1234-1234-1234`.
to make this happen you just have to set `separator` prop in jsx.
```html
```
## other props
this component support all attributes comes from [`jb-input-react`](https://www.npmjs.com/package/jb-input-reacts)
## set custom style
in some cases in your project you need to change default 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.
since jb-payment-input use jb-input underneath, read [jb-input](https://github.com/javadbat/jb-input) custom style list.
## Other Related Docs:
- see [jb-payment-input](https://github.com/javadbat/jb-payment-input) if you want to use this component as a pure-js web-component
- see [All JB Design system Component List](https://github.com/javadbat/design-system/blob/master/docs/component-list.md) for more components
- use [Contribution Guide](https://github.com/javadbat/design-system/blob/master/docs/contribution-guide.md) if you want to contribute in this component.