# Auto Numeric

Live as-you-type formatting for input fields. Use the code below to implement. Powered by the plugin react-input-mask. Please refer there documentation for further details and instructions here https://github.com/sanniassin/react-input-mask

# Importing

import InputMask from "react-input-mask";

# How to use

<div className="col-lg-6">
  <h5>Input autonumeric</h5>
  <p>
    Do you forget small things? here is something that helps to automatically
    placed forgotten dollar signs, decimal places and even comma separates and
    many more!
  </p>
  <br />
  <div className="form-group">
    <label>Decimal place and comma separator</label>
    <InputMask mask="99,999.99">
      {() => (
        <input
          type="text"
          data-a-dec="."
          data-a-sep=","
          className="autonumeric form-control"
        />
      )}
    </InputMask>
    <span className="help">e.g. "53,000.00"</span>
  </div>
  <div className="form-group">
    <label>Weird way but works</label>
    <InputMask mask="99.999,99">
      {() => (
        <input
          type="text"
          data-a-dec=","
          data-a-sep="."
          className="autonumeric form-control"
        />
      )}
    </InputMask>
    <span className="help">e.g. "45.000,00"</span>
  </div>
  <div className="form-group">
    <label>Dollar prefix</label>
    <InputMask mask="$99.99">
      {() => (
        <input
          type="text"
          data-a-sign="$ "
          className="autonumeric form-control"
        />
      )}
    </InputMask>
    <span className="help">e.g. "$45.50"</span>
  </div>
  <div className="form-group">
    <label>Range</label>
    <InputMask mask="9999" maskChar={null}>
      {() => (
        <input
          type="text"
          data-v-min="0"
          data-v-max="9999"
          className="autonumeric form-control"
        />
      )}
    </InputMask>
    <span className="help">e.g. "0 - 9,999"</span>
  </div>
</div>