Cleave.js

Cleave.js is a React input formatter. It formats values as users type and exposes the formatted value and unformatted rawValue on change events.

This React-focused package is based on the original Cleave.js project by Max Huang.

Install

GitHub Release tarball

Install a versioned tarball from the Cleave.js GitHub releases.

yarn add cleave.js@https://github.com/MercuryTechnologies/cleave.js/releases/download/v1.6.1/cleave.js-1.6.1.tgz

React must be installed by the consuming application.

Use

import Cleave from 'cleave.js/react';

export function CardNumberInput() {
  return (
    <Cleave
      options={{ creditCard: true }}
      onChange={(event) => {
        console.log(event.target.value);
        console.log(event.target.rawValue);
      }}
    />
  );
}

The package also exports the option and React prop types:

import type { CleaveOptions } from 'cleave.js/options';
import type { Props } from 'cleave.js/react/props';

Development

The package requires Node.js 22.12 or newer.

npm ci
npm run build
npm test
npm run fmt:check
npm run lint
npm run pack:check

npm test builds the package, checks its package entry points, and runs the unit tests. npm run pack:check checks the files that would be included in the release tarball.

Releases

Release tags use the package version:

git tag v1.6.1
git push origin v1.6.1

GitHub Actions builds and tests the package, creates the tarball with npm pack, and attaches it to the matching GitHub Release. Consumers can install the published tarball from that release.

License

Cleave.js is licensed under the Apache License Version 2.0.