Neutered Puppy Masquerade

    This package has been deprecated

    Author message:

    use @draft-js-plugins/counter >=v4 instead


    2.0.2 • Public • Published

    DraftJS Counter Plugin

    This is a plugin for the draft-js-plugins-editor.

    This plugin adds character and word counting functionality to your editor!


    First instantiate the plugin:

    import createCounterPlugin from 'draft-js-counter-plugin';
    const counterPlugin = createCounterPlugin();

    Now get the CharCounter, WordCounter, and LineCounter components from the instance:

    const { CharCounter, WordCounter, LineCounter } = counterPlugin;

    Which take one prop:

    1. limit (optional): a number in which the style of the text will change to reflect that the user is over the limit

    Render them with those props and your editor now has counting functionality!

    <CharCounter editorState={ this.state.editorState } limit={200} />
    <WordCounter editorState={ this.state.editorState } limit={30} />
    <LineCounter editorState={ this.state.editorState } limit={10} />

    Importing the default styles

    The plugin ships with a default styling available at this location in the installed package: node_modules/draft-js-counter-plugin/lib/plugin.css.

    Webpack Usage

    Follow the steps below to import the css file by using Webpack's style-loader and css-loader.

    1. Install Webpack loaders: npm install style-loader css-loader --save-dev

    2. Add the below section to Webpack config (if your Webpack already has loaders array, simply add the below loader object({test:foo, loaders:bar[]}) as an item in the array).

      module: {
        loaders: [{
          test: /\.css$/,
          loaders: [
            'style-loader', 'css'
    3. Add the below import line to your component to tell Webpack to inject style to your component.

      import 'draft-js-counter-plugin/lib/plugin.css';
    4. Restart Webpack.


    npm i draft-js-counter-plugin

    DownloadsWeekly Downloads






    Unpacked Size

    22.2 kB

    Total Files


    Last publish


    • adrianmcli
    • juliankrispel
    • nikgraf
    • sibelius