https://github.com/mkg0/react-numeric

A react component for formatted number form fields
https://github.com/mkg0/react-numeric

currency formatter input localization money number numeric reactjs

Last synced: 5 months ago
JSON representation

A react component for formatted number form fields

• Host: GitHub
• URL: https://github.com/mkg0/react-numeric
• Owner: mkg0
• Created: 2018-02-23T15:13:57.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-07T19:57:34.000Z (over 2 years ago)
• Last Synced: 2024-04-26T15:43:08.115Z (about 1 year ago)
• Topics: currency, formatter, input, localization, money, number, numeric, reactjs
• Language: JavaScript
• Homepage: https://mkg0.github.io/react-numeric/
• Size: 1.78 MB
• Stars: 34
• Watchers: 3
• Forks: 9
• Open Issues: 26
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# react-numeric

[![npm](https://img.shields.io/npm/l/react-numeric.svg?style=flat-square)]()

[![npm](https://img.shields.io/npm/v/react-numeric.svg?style=flat-square)](https://www.npmjs.com/package/react-numeric)

A react component for formatted number form fields

> react-numeric is a wrapper component for [autonumeric](https://github.com/autoNumeric/autoNumeric).

## Installition

```sh

yarn add react-numeric

# or

npm install react-numeric --save

```

## Usage

```jsx

import ReactNumeric from 'react-numeric';

export function USDMoneyInput(props){

  const { value } = props; // number typed

  return (

    {

        console.log(event.target.value); // '1,234.5 $'

        console.log(value); // 1234.5

      }}

    />

  );

}

// You can use predefinedOptions

import { predefinedOptions } from 'react-numeric';

export function PossitiveUSDMoneyInput(props){

  const { value } = props; // number typed

  return (

     this.setState({ value })}

    />

  );

}

// if you want to store value as string typed

export function NumberInput(props){

  const { value } = props; // string typed

  return (

     this.setState({ value })}

    />

  );

}

```