React-currency-input-mask NPM

react-currency-input-mask

ReactJS simple currency input field

Install

npm i react-currency-input-mask --save

GitLab

https://gitlab.com/damjan89/react-money

Usage

React >= 16.9.0

import * as React from 'react'

import ReactMoneyComponent from 'react-currency-input-mask'
import 'react-currency-input-mask/src/assets/style.css'
class IndexComponent extends React.Component {
   constructor(props:any) {
       super(props);
       this.state = {
         price: 2.2,
         config:  {
           prefix: '$',
           suffix: '%',
           precision: 2,
           className: 'yourClassName',
           decimalSeparator: ',',
         }
       }
     }
/*
  * Name: changePrice
  * Description: This function is called when user change input value
  * Parameters: price(changed Price)
  * author: Nick Dam
  * */
  changePrice(price:number){
      this.setState({price: price})
  }
  render () {
    return (
        <div>
          <p>{this.state.price}</p>
          <ReactMoneyComponent 
              value={this.state.price} 
              config={this.state.config} 
              onChange={(e:any) => this.changePrice(e)}><
          /ReactMoneyComponent>
        </div>
    )
  }
}

Styling Component

In this.state.config add your class name!

To style input field:
.yourClassName .reactMoneyInput {
    //yourStyle
}

To style prefix:
.yourClassName .reactMoneyInputGroupPrepend {
    //yourStyle
}

To style suffix:
.yourClassName .reactMoneyInputGroupAppend {
    //yourStyle
}