https://github.com/phenax/react-cc-validator

Card number input component with validation for react
https://github.com/phenax/react-cc-validator

credit-card react validation

Last synced: 3 months ago
JSON representation

Card number input component with validation for react

• Host: GitHub
• URL: https://github.com/phenax/react-cc-validator
• Owner: phenax
• License: mit
• Created: 2018-04-28T13:17:39.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2018-07-02T19:34:31.000Z (almost 7 years ago)
• Last Synced: 2025-02-18T13:40:27.958Z (4 months ago)
• Topics: credit-card, react, validation
• Language: JavaScript
• Homepage:
• Size: 342 KB
• Stars: 1
• Watchers: 2
• Forks: 1
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        

# react-cc-validator

Credit/Debit card number validator input written in react.

[Demo](https://phenax.github.io/react-cc-validator)

[![Travis](https://img.shields.io/travis/phenax/react-cc-validator.svg?style=for-the-badge)](https://travis-ci.org/phenax/react-cc-validator)

[![Codecov](https://img.shields.io/codecov/c/github/phenax/react-cc-validator.svg?style=for-the-badge)](https://codecov.io/gh/phenax/react-cc-validator)

[![npm](https://img.shields.io/npm/v/@shaaditech/react-cc-validator.svg?style=for-the-badge)](http://npmjs.com/package/@shaaditech/react-cc-validator)

[![Greenkeeper badge](https://badges.greenkeeper.io/phenax/react-cc-validator.svg)](https://greenkeeper.io/)

### Install

* Add package in project using

`yarn add @shaaditech/react-cc-validator`

* Import

```js

import CardNumberValidator from '@shaaditech/react-cc-validator';

```

### API

#### Usage

You can refer to [/example](https://github.com/phenax/react-cc-validator/tree/master/example/src)

```js

const YourComponent = () => (

  


    

      {({ isValid, cardType, getInputProps }) => (

        


          

          
{ isValid && cardType }

          {isValid || 
Card number is invalid
}

        

      )}

    

  

);

```


#### Types

```js

// The props that can be passed to CardNumberValidator compopent

type PropTypes = {

  children: PassedProps => ReactNode,

  validCardTypes: Array,

  format: Boolean,

};

// The props to be passed to the input element

type InputProps = {

  onChange: Function,

  value: String,

};

// The props passed down to the render component

type PassedProps = {

  ...InputProps,

  isValid: Boolean,

  cardType: String,

  getInputProps: () => InputProps,

};

```