How to Integrate jQuery Mask Plugin with React.js? #498

Activity

1. igorescobar

   changed the title [-]How to Integrate jQuery Mask Plugin it with React.js?[/-] [+]How to Integrate jQuery Mask Plugin with React.js?[/+] on Dec 27, 2016
2. igorescobar

   closed this as completedon Dec 27, 2016
3. rinatsafin commented on Aug 13, 2018

   

   rinatsafin

   on Aug 13, 2018

   More actions

   not work fiidle

   👍React with 👍4Reacted by armando manuel moura de oliveira, Ismael Ezequiel, Dougllas Sousa and Luiz Fellype Cassago

   👎React with 👎1Reacted by Ismael Ezequiel

   😕React with 😕1Reacted by Ismael Ezequiel
4. duynguyenhoang commented on Aug 28, 2018

   

   duynguyenhoang

   on Aug 28, 2018

   Last edited by duynguyenhoang

   More actions

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

   👍React with 👍1Reacted by Nick Fabrizzi
5. wemersonrv commented on Dec 30, 2018

   

   wemersonrv

   on Dec 30, 2018

   More actions

   Hello, to use with React, i need to install this plugin and jquery too ?
6. duynguyenhoang commented on Jan 2, 2019

   

   duynguyenhoang

   on Jan 2, 2019

   More actions

   Definitely yes, It is jQuery plugin.

   😕React with 😕1Reacted by Arianne
7. LuizFellype commented on Apr 5, 2020

   

   LuizFellype

   on Apr 5, 2020

   Last edited by LuizFellype

   More actions

   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.

   👍React with 👍14Reacted by Coskun Uyar, AquiVocêPode, Rafael Castro, Nick Fabrizzi, Guilherme Selair, Isaú Jr., Dionatas Lazzari, cumthyb, jeff-azevedo, Charlie W and 4 more

   😄React with 😄1Reacted by Rafael Castro

   ❤️React with ❤️4Reacted by Rafael Castro, Dionatas Lazzari, Guilherme Teixeira and Lucas Lacroix
8. relaxdd commented on Apr 24, 2022

   

   relaxdd

   on Apr 24, 2022

   More actions

   так же почему то не работает если прописать в input data-mask="..."
9. Alberto-Frigatto commented on Dec 22, 2022

   

   Alberto-Frigatto

   on Dec 22, 2022

   More actions

   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;