Character Counter With Visual Feedback – CharCount

Preview:

Description:

CharCount is an ES6 JavaScript library that provides character counters with visual feedbacks for input and textarea elements.

How to use it:

Install the CharCount via NPM.

# NPM
$ npm install char-count-es6 --save

Import the CharCount.

import CharCount from 'char-count-es6';

Or directly install the CharCount library in the document.

<script src="/dist/charcount.min.js"></script>

Create a new CharCount instance and pass the following options to the character counter.

const myCharCount = new CharCount({
       
      // selector of text field
      selector: "cc-field",
      // threshold values
      warningThreshold: 25,
      dangerThreshold: 10,
      expendedThreshold: 100,
      // counter class
      counterClass: 'cc-count',
      // DOM interaction classes
      emptyClass: 'cc-is-empty',
      fineClass: 'cc-is-fine',
      warningClass: 'cc-is-warning',
      dangerClass: 'cc-is-danger',
      expendedClass: 'cc-is-expended',
});

Callback functions available.

const myCharCount = new CharCount({
       
      // Fired when a fields text count is zero; not entirely sure on its continued usefulness
      onFieldEmpty: (field, remaining) => {},
      
      // Fired when a fields text remaining count is a-okay, after coming from another state
      onFieldFine: (field, remaining) => {},
      
      // Fired when the desired warning threshold is reached
      onFieldWarning: (field, remaining) => {},
      
      // Fired when the desired danger threshold is reached
      onFieldDanger: (field, remaining) => {},
      
      // Fired when the limit is all used up!
      onFieldExpended: (field, remaining) => {},
});