Codakey
Play
← Back to nosir/cleave.js

How to Deploy & Use nosir/cleave.js

Cleave.js Deployment and Usage Guide

This guide provides comprehensive instructions for deploying and using Cleave.js, a JavaScript library for formatting input text content.

⚠️ Deprecation Notice

Please be aware that Cleave.js has been deprecated. The author recommends exploring the new version, cleave-zen, for continued use. This guide pertains to the deprecated cleave.js library.

1. Prerequisites

To use Cleave.js, you need:

  • Node.js and npm: For installing via npm and managing dependencies.
  • Web Browser: To run the JavaScript in a web environment.
  • Text Editor/IDE: For writing and editing code.

2. Installation

You can install Cleave.js using npm, a CDN, or by downloading the files directly.

npm

npm install --save cleave.js

CDN

You can include Cleave.js directly from a CDN.

jsDelivr: https://cdn.jsdelivr.net/npm/cleave.js@1.6.0/dist/cleave.min.js https://cdn.jsdelivr.net/npm/cleave.js@1.6.0/dist/addons/cleave-phone.{country}.js (replace {country} with the desired country code, e.g., us, de, fr)

cdnjs.com: https://cdnjs.cloudflare.com/ajax/libs/cleave.js/1.6.0/cleave.min.js https://cdnjs.cloudflare.com/ajax/libs/cleave.js/1.6.0/addons/cleave-phone.{country}.js

Old School (Direct Download)

You can download the necessary files from the dist directory in the GitHub repository.

3. Configuration

Cleave.js is configured through an options object passed during instantiation. No separate configuration files or environment variables are typically required for basic usage.

Phone Number Addon Configuration

For phone number formatting, you need to include the specific country addon and specify the phoneRegionCode in the options.

Example:

var cleave = new Cleave('.input-phone', {
  phone: true,
  phoneRegionCode: 'US' // Replace 'US' with your target country code (e.g., 'DE', 'FR')
});

The relevant phone number addon files are located in src/addons/ and are named phone-type-formatter.{country_code}.js (e.g., phone-type-formatter.us.js, phone-type-formatter.de.js). These correspond to the cleave-phone.{country}.js files in the dist/addons directory.

4. Build & Run

Cleave.js is a client-side JavaScript library, so there's no traditional "build" process for the library itself when used directly in a browser. If you're using a module bundler like Webpack or Rollup, it will handle the bundling of Cleave.js along with your application code.

Local Development (Browser)

  1. Include Cleave.js: Add the cleave.min.js script to your HTML file. If using phone number formatting, also include the relevant cleave-phone.{country}.js addon.

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cleave.js Example</title>
</head>
<body>
    <input class="input-phone" type="text" placeholder="Enter phone number" />
    <input class="input-credit-card" type="text" placeholder="Enter credit card" />
    <input class="input-date" type="text" placeholder="YYYY/MM/DD" />
    <input class="input-numeral" type="text" placeholder="Enter number" />

    <script src="path/to/cleave.min.js"></script>
    <!-- For phone number formatting, include the specific country addon -->
    <script src="path/to/cleave-phone.us.js"></script>
    <script>
        // Initialize Cleave.js instances
        new Cleave('.input-phone', {
            phone: true,
            phoneRegionCode: 'US'
        });

        new Cleave('.input-credit-card', {
            creditCard: true,
            onCreditCardTypeChanged: function (type) {
                console.log('Credit card type: ' + type);
            }
        });

        new Cleave('.input-date', {
            date: true,
            datePattern: ['Y', 'm', 'd']
        });

        new Cleave('.input-numeral', {
            numeral: true,
            numeralThousandsGroupStyle: 'thousand'
        });
    </script>
</body>
</html>

  2. Open in Browser: Save the HTML file and open it in your web browser. Interact with the input fields to see Cleave.js in action.

CommonJS / AMD / ES Module (Bundled Applications)

If you are using a module bundler (e.g., Webpack, Rollup) or a module loader (e.g., RequireJS), you would import Cleave.js as follows:

CommonJS:

var Cleave = require('cleave.js');
// For phone number addon
require('cleave.js/dist/addons/cleave-phone.us'); // Replace .us with your country code

var cleave = new Cleave('.input-phone', {
  phone: true,
  phoneRegionCode: 'US'
});

AMD:

require(['cleave.js/dist/cleave.min', 'cleave.js/dist/addons/cleave-phone.us'], function (Cleave) {
    var cleave = new Cleave('.input-phone', {
      phone: true,
      phoneRegionCode: 'US'
    });
});

ES Module:

// For bundlers like Rollup, WebPack
import Cleave from 'cleave.js';
// For browser-native ES modules (ensure path is correct)
// import Cleave from 'node_modules/cleave.js/dist/cleave-esm.min.js';

// If using phone addon with ES Modules, you might need to import it explicitly
// depending on your bundler's configuration.
// import 'cleave.js/dist/addons/cleave-phone.us';

var cleave = new Cleave('.input-phone', {
  phone: true,
  phoneRegionCode: 'US'
});

ReactJS Component Usage:

import React from 'react';
import ReactDOM from 'react-dom';
import Cleave from 'cleave.js/react'; // Import the React component

class MyFormComponent extends React.Component {
  onCreditCardChange(event) {
    console.log('Formatted value:', event.target.value);
    console.log('Raw value:', event.target.rawValue);
  }

  render() {
    return (
      <Cleave
        placeholder='Enter your credit card number'
        options={{ creditCard: true }}
        onChange={this.onCreditCardChange}
      />
    );
  }
}

ReactDOM.render(<MyFormComponent />, document.getElementById('root'));

5. Deployment

Cleave.js is a front-end JavaScript library. Deployment involves serving your static HTML, CSS, and JavaScript files to a web server.

  1. Build Your Application (if applicable): If your project uses a build step (e.g., Webpack, Parcel, Rollup for React/Angular projects), run your build command to generate production-ready static assets. Example for a React app:

    npm run build

  2. Collect Static Assets: Ensure all necessary Cleave.js files (e.g., cleave.min.js, cleave-phone.{country}.js) are included in your build output or directly in your static asset directory.

  3. Choose a Hosting Platform: Any static file hosting service or web server can host a Cleave.js-enabled application. Recommended platforms include:

    • Netlify: Excellent for static sites, provides continuous deployment from Git.
    • Vercel: Similar to Netlify, great for front-end frameworks.
    • GitHub Pages: Simple hosting directly from a GitHub repository.
    • AWS S3 + CloudFront: Scalable and robust solution for static content.
    • Firebase Hosting: Easy to set up and integrates well with other Firebase services.
    • Nginx/Apache: Traditional web servers for self-hosted solutions.

  4. Upload/Deploy:

    • For Netlify/Vercel/GitHub Pages: Connect your Git repository, and the platform will automatically build and deploy your site on pushes to the configured branch.
    • For S3/Firebase/Nginx/Apache: Upload your static files (HTML, CSS, JS, including Cleave.js) to the designated web server directory or S3 bucket.

6. Troubleshooting

  • Cleave.js not formatting input:

    • Ensure new Cleave() is called after the DOM element is available (e.g., inside DOMContentLoaded event listener or at the end of <body>).
    • Verify the CSS selector passed to new Cleave() correctly targets your input element. If you have multiple inputs with the same class, you need to loop through them and create a new Cleave instance for each, as shown in the loop solution.
    • Check for JavaScript errors in the browser console (F12).

  • Phone number formatting not working:

    • Make sure you have included the correct cleave-phone.{country}.js addon script for the specified phoneRegionCode.
    • Confirm the phoneRegionCode in your options matches the country addon you included (e.g., phoneRegionCode: 'US' requires cleave-phone.us.js).

  • React component onChange returns undefined for rawValue:

    • The event.target.rawValue is specific to the Cleave.js React component. Ensure you are accessing it correctly from the event object passed to your onChange handler.

  • Module not found errors (Webpack/Rollup):

    • Verify your import or require paths are correct. For phone addons, remember they are in cleave.js/dist/addons/.
    • Ensure your bundler is configured to handle JavaScript files from node_modules.

  • Input value not updating or behaving unexpectedly:

    • Avoid directly manipulating the value attribute of inputs managed by Cleave.js, as this can interfere with its formatting logic. Use Cleave.js methods or React state management where appropriate.
    • If using React, ensure you are passing options as a prop and handling onChange events to update your component's state.
← Project overviewView alternatives to nosir/cleave.js →