The Cleave.js library in JavaScript helps in formatting input text. Formatting the typed data improves the readability of the input field. It can handle credit card formatting, phone number formatting, custom delimiters, date formatting, and numeral formatting
Cleave.js can be integrated into a React application.
The first step is to download and install the Cleave.js library. Enter the following command in the terminal:
npm install --save cleave.js
This command will install the dependencies specified in the files package.json and package-lock.json. Import the module into the project in the React application:
import Cleave from "cleave.js/react";
We would be making a simple form that uses Cleave.js to validate input fields from the src/App.js file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
In the src/App.js file,
Line 2: The Cleave.js library is imported into the React application.
Line 14: The <Cleave/> tag is used in place of an input tag to validate the data entered into the fields.
Note: It is important to note that it has the same attributes as an input element, but it also has an options property that handles the type of data that would be entered into the field. Such as creditCard, which validates credit card values, and date, which validates a date value, among other options.
Run the code above to see how Cleave.js is integrated into a React application.