@phenax/react-cc-validator

0.0.1 • Public • Published

react-cc-validator

Credit/Debit card number validator input written in react. Demo

Travis Codecov

Install

  • Add package in project using yarn add @phenax/react-cc-validator

  • Import

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

API

Usage

You can refer to /example

const YourComponent = () => (
  <div>
    <CardNumberValidator>
      {({ isValid, cardType, getInputProps }) => (
        <div>
          <input type="text" {...getInputProps()} />
          <div>{ isValid && cardType }</div>
          {isValid || <div>Card number is invalid</div>}
        </div>
      )}
    </CardNumberValidator>
  </div>
);

Types

// The props that can be passed to CardNumberValidator compopent
type PropTypes = {
  children: PassedProps => ReactNode,
  validCardTypes: Array<String>,
  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,
};

Package Sidebar

Install

npm i @phenax/react-cc-validator

Weekly Downloads

0

Version

0.0.1

License

MIT

Unpacked Size

803 kB

Total Files

28

Last publish

Collaborators

  • phenax