It is a very tiny component which is a replacement of HTML input element for post-editing format of number values. ex. 1000000 -> 1,000,000

Last update: Jan 28, 2019

react-numeral-input npm version Build Status

It is a very tiny component which is a replacement of HTML input element for post-editing format of number values.

ex. 1000000 -> 1,000,000

react-numeral-input

use Number Keyboard on device

use Number Keyboard on device

Live Demo

react-numeral-input

Dependency

install

npm install react-numeral-input

Usage

// like this ">
// replace original input from
<input value={this.state.numeralVal} className="" placeholder="" onChange={this.onChange} />

// like this
<NumeralInput value={this.state.numeralVal} className="" placeholder="" onChange={this.onChange} />

Example

) } }); ">
let NumeralInput = require('react-numeral-input');

module.exports = React.createClass({
  getInitialState() {
    return {
      numeralVal: 1000000
    }
  },
  onChange(val){
    this.setState( {numeralVal:val});
  },
  render() {
    return (
      <NumeralInput
        value={this.state.numeralVal}
        className="form-control"
        placeholder=""
        onChange={this.onChange} />
    )
  }
});

Options

You can set any original input props. such as minlength, maxlength. For example:

">
<NumeralInput value={this.state.numeralVal} className="" placeholder="" onChange={this.onChange} minLength={2} maxLength={10}/>

fmt(:string)

Default: "0,0"

It is passed to configure numeral format, You can find more information from Numeral.js.

onChange(:function)

Callback when value is changed, you will receieve unformated number (1000000 instead of 1,000,000).

GitHub

https://github.com/blackbing/react-numeral-input/
You might also like...

This is memories application developed using React JS,mongo DB .We can perform CRUD operation in this app like create post,read post,make changes in previously posted post as well as delete post.

This is memories application developed using React JS,mongo DB .We can perform CRUD operation in this app like create post,read post,make changes in previously posted post as well as delete post.

Memories Front end - React,javascript,html,css Back end- NODE JS Application - This is memory application and it is a simple social media app that all

Apr 20, 2022

React Input Format & Mask, tiny (≈800b) component to transform any input component into formatted or masked input. Supports number, date, phone, currency, credit card, etc

RIFM - React Input Format & Mask Is a tiny (≈ 800b) component (and hook) to transform any input component into formatted or masked input. Demo Highlig

May 5, 2022

Typescriptreactbrand2022 - This is my very first React application in typescript format!

#TypeScriptReact Brand 2022 Remember, this is just the version 1. I just finished watching and doing the hands-on project of the Traversy Media Typesc

Jan 2, 2022

Feather is a very, very early stage React component library.

Feather is a very, very early stage React component library.

Feb 20, 2022

Very simple react component for rotate element based on scroll position

Very simple react component for rotate element based on scroll position

Jun 28, 2021

timeago.js is a tiny(2.0 kb) library used to format date with `*** time ago` statement.

timeago.js is a nano library(less than 2 kb) used to format datetime with *** time ago statement. eg: '3 hours ago'. i18n supported.

May 11, 2022

Wrapper component that detects element resize and passes new dimensions down the tree. Based on https://github.com/wnr/element-resize-detector

react-container-dimensions Wrapper component that detects parent (container) element resize and passes new dimensions down the tree. Based on element-

Apr 16, 2022

A tiny React utils which gives uncontrolled input elements a power of namespaces, and allows constructing complex objects

A tiny React utils which gives uncontrolled input elements a power of namespaces, and allows constructing complex objects

Apr 26, 2022

React component to format numbers in an input or as a text.

React component to format numbers in an input or as a text.

react-number-format React component to format number in an input or as a text Features Prefix, suffix and thousand separator. Custom format pattern. M

May 16, 2022

😎 🖥️ React hook to monitor an element enters or leaves the viewport (or another element).

😎 🖥️ React hook to monitor an element enters or leaves the viewport (or another element).

😎 🖥️ React hook to monitor an element enters or leaves the viewport (or another element).

May 14, 2022

Studies of React Native Shared Element & React Navigation Shared Element inspired by the Catalin Miron

Studies of React Native Shared Element & React Navigation Shared Element inspired by the Catalin Miron

Studies of React Native Shared Element & React Navigation Shared Element inspired by the Catalin Miron

Nov 4, 2021

React hook for creating input values

@rehooks/input-value React hook for creating input values Note: This is using the new React Hooks API Proposal which is subject to change until React

May 7, 2022

Allows to use React.js component as HTML element (web component)

Allows to use React.js component as HTML element (web component)

Note! The docs here are for the v1.0.0 alpha. This is not ready for production use yet. You should use this README, which refers to 0.10.0, the latest

Mar 24, 2022

Headless phone number input component for React. Because phone numbers are hard.

React Headless Phone Input A headless phone number input component built for usability. Phone numbers are hard. Users expect to be able to enter phone

Mar 29, 2022

React component for international phone number input

React component for international phone number input

react-phone-number-input International phone number input for React. See Demo Install npm install react-phone-number-input --save If you're not us

May 7, 2022

International phone number input component for react

Welcome to react-contact-number-input 👋 International phone number input component for react Install npm install react-contact-number-input Author 👤

Apr 12, 2022

A full-stack web app built with NestJS and ReactJS that helps you find and discover over 500,000+ video games on your device. Powered by RAWG API.

A full-stack web app built with NestJS and ReactJS that helps you find and discover over 500,000+ video games on your device. Powered by RAWG API.

Game Store Monorepo A full-stack web app built with NestJS and ReactJS that helps you find and discover over 500,000+ video games on your device. Powe

May 6, 2022

React Typesense Search 10,000 Trending Movies using Instantsearch

React Typesense Search 10,000 Trending Movies using Instantsearch

Getting Started with Create React App This project was bootstrapped with Create React App. Demo Available Scripts In the project directory, you can ru

Mar 21, 2022

Jump from the HTML element to the source code of the generator

Jump from the HTML element to the source code of the generator

tsx-source-jump Jump from the HTML element to the source code of the generator.

May 5, 2022
Comments
  • 1. Having more than 1 NumeralInput on a page brings focus to the last one

    I have a form with multiple NumeralInput's on it. If a key is pressed on the 1st input it automatically tabs down to the last input. This seems to only happen in Safari.

    Reviewed by michaelryancaputo at 2015-09-08 18:56
  • 2. How to change fmt on v0.3.3

    After moving fmt out from props in https://github.com/blackbing/react-numeral-input/commit/f14188289405880a9cd5249f5181647b3be5d4d5 how are we supposed to change the format?

    Atm fmt is a const that we can't pass to react-numeral-input. Or am I missing something obvious?

    We can no longer do <NumeralInput fmt="$00,00">

    Reviewed by stenehall at 2016-09-26 08:42
  • 3. cursor jumps to end when typing

    I notice when you try to edit a number and are not at the end of the input field, the cursor will jump to the end of the field when you press a key. Would likely use this without that issue.

    Reviewed by aktxyz at 2015-09-17 21:31
Set of enhancements for react input control

This project was originally thought to be an experiment and currently is unmaintained (and buggy) Use it at your own risk react-input-enhancements Set

May 10, 2022
An input type=range that steps up and down on click

react-range-step-input An <input type=range> that steps up and down on click, and provides other customizations. For more info, see: https://compiled.

Mar 15, 2022
📋 Reactive form management and input field validation hook

?? Reactive form management and input field validation hook

Jan 21, 2022
react-hook-form is an awsome library which provide a neat solution for building forms.

react-hook-form is an awsome library which provide a neat solution for building forms. However, there are many rules for the API which may be missed by the developer. This plugin aims to check those rules automatically thourgh ESLint. Thus brings better DX for react-hook-form.

May 7, 2022
Simple 'click to edit' editable text component for React

Simple 'click to edit' editable text component for React

May 7, 2022
📟 React component for entering PIN codes.
📟 React component for entering PIN codes.

?? React component for entering PIN codes.

May 2, 2022
react-awesome-button is a performant, extendable, highly customisable, production ready React Component that renders an animated set of 3D UI buttons.
react-awesome-button is a performant, extendable, highly customisable, production ready React Component that renders an animated set of 3D UI buttons.

react-awesome-button is a performant, extendable, highly customisable, production ready React Component that renders an animated set of 3D UI buttons. Bundled together with a social share and progress enabled components.

May 9, 2022
One Time Password Component Package for Chakra UI

One Time Password Component Package for Chakra UI

Nov 25, 2021
React Redux Multi-Step Signup Form. Created with React, Redux Toolkit, and SASS. Plus React Lazy Load for Component loading.
React Redux Multi-Step Signup Form. Created with React, Redux Toolkit, and SASS. Plus React Lazy Load for Component loading.

React Redux Multi-Step Signup Form. Created with React, Redux Toolkit, and SASS. Plus React Lazy Load for Component loading.

Jan 23, 2022
A multi-step form component library built with React and styled with Emotion
A multi-step form component library built with React and styled with Emotion

React Emotion Multi-step Form A multi-step form component library built with React and styled with Emotion Introduction A declarative component librar

Jan 25, 2022