hain-tain-hooks

Features

🚨 This is a module created for practice, so be careful what you download.

• It's easy to implement custom hooks for card payments.

Install

npm install hain-tain-hooks

Quick start

🤔 What is the difference between useCardNumber and useCardNumbers?

For useCardNumber, the card number is managed as a string value, and for useCardNumbers, the card number is managed as a string[] value.

Therefore, useCardNumber can be used with one input, and useCardNumbers can be used with multiple inputs.

• useCardNumber

import useCardNumber from 'hain-tain-hooks';

const CardNumber = () => {
  const {
    value,
    formattingValue,
    errorMessage,
    cardBrand,
    onChangeHandler,
    onBlurHandler,
    onFocusHandler,
  } = useCardNumber('');

  return (
    <>
      <p>{cardBrand}</p>
      <input
        value={formattingValue}
        onChange={onChangeHandler}
        onBlur={onBlurHandler}
        onFocus={onFocusHandler}
        onKeyDown={(e) => {
          if (e.key === 'Escape' || e.key === 'Enter') {
            e.currentTarget.blur();
          }
        }}
      />
      <p>value: {value}</p>
      <p>formattingValue : {formattingValue}</p>
      <p style={{ color: 'red' }}>{errorMessage}</p>
    </>
  );
};

export default CardNumber;

• useCardNumbers

import { useCardNumbers } from 'hain-tain-hooks';

const CardNumbers = () => {
  const {
    values,
    errorMessage,
    onChangeHandler,
    onBlurHandler,
    onFocusHandler,
  } = useCardNumbers(['', '', '', '']);

  return (
    <>
      {[...Array(4)].map((_, index) => (
        <input
          value={values[index]}
          onChange={(e) => onChangeHandler(e, index)}
          onBlur={() => onBlurHandler(index)}
          onFocus={() => onFocusHandler(index)}
          onKeyDown={(e) => {
            if (e.key === 'Escape' || e.key === 'Enter') {
              e.currentTarget.blur();
            }
          }}
        />
      ))}
      <p style={{ color: 'red' }}>{errorMessage}</p>
    </>
  );
};

• useCardCompany

import { useCardCompany } from 'hain-tain-hooks';

const CARD_COMPANY_LIST = ['카카오뱅크', '현대카드', '신한카드', '국민카드'];

const CardCompany = () => {
  const {
    value,
    errorMessage,
    onChangeHandler,
    onBlurHandler,
    onFocusHandler,
  } = useCardCompany('', CARD_COMPANY_LIST);

  return (
    <>
      <input
        value={value}
        onChange={onChangeHandler}
        onBlur={onBlurHandler}
        onFocus={onFocusHandler}
        onKeyDown={(e) => {
          if (e.key === 'Escape' || e.key === 'Enter') {
            e.currentTarget.blur();
          }
        }}
      />
      <p style={{ color: 'red' }}>{errorMessage}</p>
    </>
  );
};

export default CardCompany;

• useCardExpirationDate

import { useCardExpirationDate } from 'hain-tain-hooks';

const CardExpirationDate = () => {
  const {
    values,
    errorMessage,
    onChangeHandler,
    onBlurHandler,
    onFocusHandler,
  } = useCardExpirationDate(['', '']);

  return (
    <>
      {[...Array(2)].map((_, index) => (
        <input
          value={values[index]}
          onChange={(e) => onChangeHandler(e, index)}
          onBlur={() => onBlurHandler(index)}
          onFocus={() => onFocusHandler(index)}
          onKeyDown={(e) => {
            if (e.key === 'Escape' || e.key === 'Enter') {
              e.currentTarget.blur();
            }
          }}
        />
      ))}
      <p style={{ color: 'red' }}>{errorMessage}</p>
    </>
  );
};

• useCardHolderName

import { useCardHolderName } from 'hain-tain-hooks';

const CardHolderName = () => {
  const {
    value,
    errorMessage,
    onChangeHandler,
    onBlurHandler,
    onFocusHandler,
  } = useCardHolderName('');

  return (
    <>
      <input
        value={value}
        onChange={onChangeHandler}
        onBlur={onBlurHandler}
        onFocus={onFocusHandler}
        onKeyDown={(e) => {
          if (e.key === 'Escape' || e.key === 'Enter') {
            e.currentTarget.blur();
          }
        }}
      />
      <p style={{ color: 'red' }}>{errorMessage}</p>
    </>
  );
};

export default CardHolderName;

• useCardCVC

import { useCardCVC } from 'hain-tain-hooks';

const CardCVC = () => {
  const {
    value,
    errorMessage,
    onChangeHandler,
    onBlurHandler,
    onFocusHandler,
  } = useCardCVC('');

  return (
    <>
      <input
        value={value}
        onChange={onChangeHandler}
        onBlur={onBlurHandler}
        onFocus={onFocusHandler}
        onKeyDown={(e) => {
          if (e.key === 'Escape' || e.key === 'Enter') {
            e.currentTarget.blur();
          }
        }}
      />
      <p style={{ color: 'red' }}>{errorMessage}</p>
    </>
  );
};

export default CardCVC;

• useCardPassword

import { useCardPassword } from 'hain-tain-hooks';

const CardPassword = () => {
  const {
    value,
    errorMessage,
    onChangeHandler,
    onBlurHandler,
    onFocusHandler,
  } = useCardPassword('');

  return (
    <>
      <input
        value={value}
        onChange={onChangeHandler}
        onBlur={onBlurHandler}
        onFocus={onFocusHandler}
        onKeyDown={(e) => {
          if (e.key === 'Escape' || e.key === 'Enter') {
            e.currentTarget.blur();
          }
        }}
      />
      <p style={{ color: 'red' }}>{errorMessage}</p>
    </>
  );
};

export default CardPassword;

API

Top-Level Exports

• useValidateInput
• useValidateInputs
• useCardNumber
• useCardNumbers
• useCardCompany
• useCardExpiration
• useCardHolderName
• useCardCVC
• useCardPassword

Contributors

@hain-tain @Todari