How to Integrate jQuery Mask Plugin with React.js?

[igorescobar]

I've made a simple jsfiddle showing how to integrate jQuery Mask with React.js:
https://jsfiddle.net/igorescobar/47ubm7az/

[rinatsafin]

not work fiidle

[duynguyenhoang]

@rinatsafin You can refer to my new example https://jsfiddle.net/nhduy88/20s9ubrv/

[wemersonrv]

Hello, to use with React, i need to install this plugin and jquery too ?

[duynguyenhoang]

Definitely yes, It is jQuery plugin.

[LuizFellype]

Yes, Need install and import jQuery as $ and need to import the code on top of the file, like this:

import $ from 'jquery';
import 'jquery-mask-plugin/dist/jquery.mask.min'; 

Theeennn... You can use it:

$('.dinheiro').mask('#.##0,00', {
      reverse: true,
      placeholder: '0,00'
    });

I am clarifying this because I didn't find anyone saying nothing. And just adding the script into header tag doesn't work.

[relaxdd]

так же почему то не работает если прописать в input data-mask="..."

[Alberto-Frigatto]

1. First you must install jquery-mask-plugin by your package manager:

NPM:

npm i jquery-mask-plugin

Bower:

bower install jquery-mask-plugin

Meteor:

meteor add igorescobar:jquery-mask-plugin

Composer:

composer require igorescobar/jquery-mask-plugin

2. Then you will import jquery and jquery-mask-plugin in your component:

import $ from 'jquery';
import 'jquery-mask-plugin';

const Component = () => {
  $(() => {
    $('#date').mask('00/00/0000');
  });

  return (
    <form onSubmit = { e => e.preventDefault() }>
      <input
        type = 'text'
        id = 'date'
        placeholder = '00/00/0000'
      />
    </form>
  );
}

export default Component;