npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ninja-react-number-input

v1.14.9

Published

HTML input field designed to display formatted currency values

Downloads

2

Readme

Build Status

React Number Input component

HTML input element clone with support for post-edit formatting of number values. An input of 1000000 will format to 1,000,000 under en-AU locale.

Usage

Usage via npm and webpack is recommended at this stage. build/ contains UMD compatible javascript which could be used in browsers.

Demo

See for yourself

Screencast demo

in flight

Screencast demo has the following configuration:

* Optionally format to 2 decimal places
* No minimum
* No maximum

Install

React version of the form [email protected] maps to [email protected]. Currently supports 0.12, 0.13 and 0.14.

[email protected]

npm install --save [email protected]

[email protected]

npm install --save [email protected]

[email protected]

npm install --save [email protected]

Use

Use it like a normal react form element.

<NumberInput
	id="price"
	type="number"                   // optional, input[type]. Defaults to "tel" to allow non numeric characters
	onChange={this.onPriceChange}   // use it like normal event handler
	onBlur={this.onPricedUpdated}   // use it like normal event handler
	onFocus={this.onPricedEditing}  // use it like normal event handler
	value={this.state.price}        // normal react input binding
	placeholder="Enter price"       // all other input properties are supported
	min={0}                         // optional, set minimum allowed value
	max={100}                       // optional, set maximum allowed value
	format="0"                      // optional, numeral.js format string. Defaults to "0,0[.][00]"
/>

All properties supplied to NumberInput will also be transferred to the resulting input element (e.g., style or className).

Supported event handlers

All event handlers supported by <input /> are supported.

All of the event handlers receive the original event object as its argument.

React.createClass({
	_onChange: function (event) {
		console.log(event.target.id); // test
	},

	render: function () {
		return (
			<NumberInput
				id='test'
				onChange={this._onChange}
				value={this.state.price}
				format='0,0'
				placeholder='0'
			/>
		);
	}
});

format="0,0" follows numeral.js format. Defaults to: "0,0[.][00]".

Behaviour

  • You get raw, unchange event object onChange
  • You get filtered, modified event.target.value onBlur

Basically, it allows users to enter anything they want by default. Only onBlur, we change that to map to whatever is specified in format property.

Contributing / Developing / Running demo

If you're thinking of contributing, there are a number of npm scripts you can run to speed up the process.

Building react-number-input

npm install
npm run prerelease

Testing react-number-input

npm run lint
npm run test

Building and running the demo

npm run build-demos
npm run start

Then head to http://localhost:3000/ to see the demo.

Note

  • Renders input[type=tel] element, can be overriden by providing type property
  • Number formatting is removed on focus
  • Number formatting is applied on blur
  • If input contains all zeroes, zeroes are left in place until blur

TODO

  • Add support for different locales
  • Assume en-AU locale
  • Currently requires numeral