Package Exports

@phenax/react-cc-validator

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@phenax/react-cc-validator) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-cc-validator

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

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,
};