Highly customizable React form element component for numbers (prices). It validates inputs in realtime (if user press not acceptable character it wont appear in input field). This component may be configured for each input (you can set number of digits in integer part and number of digits in decimal part, you can set decimal separator, accept only positive or negative values).
The Big advantage of this component, is separation of view value and model value (value which is available to other javascript code). You can set comma as decimal separator (default is dot) for numbers. And then in input field there will be comma as separator, but your model value will have correct float number with dot separator.
It works at realtime, therefore this model value may be use in computation for other elements and they will change real time too.
This is port of Angular Dynamic Number
- config max numbers for integer part and decimal part.
- config decimal separator (dot or comma)
- config to accept positive, negative and both numbers.
- model value is correct javascript number, but view value may be correct number for localities
- allow to set thousand separator (dot, comma or space)
npm install react-dynamic-number
It needs react to work correctly. It is compiled without react at its source.
import React from 'react';
import ReactDOM from 'react-dom';
import DynamicNumber from 'react-dynamic-number';
class SomeParentComponent extends React.Component {
constructor(props) {
super(props);
};
onChange(evt, modelValue, viewValue) {
//modelValue has proper js value which you can process
//viewValue it is string which is visible to user in form input
console.log(modelValue);
console.log(viewValue);
};
render() {
return (
<DynamicNumber className="form-control" onChange={this.onChange.bind(this)} separator={','} integer={5} fraction={5} />
);
}
}
//this render this component, but in normal situation you render only root component
ReactDOM.render(
<SomeParentComponent />,
document.getElementById('app')
);
<DynamicNumber
value={0}
separator={'.'}
integer={10}
fraction={10}
positive={true}
negative={true}
thousand={' '}
onChange={this.handleChange}
/>
- type: Number or '' (empty string)
- required: false
- default: 0
Init value of input. If init value is '' then input is empty.
When you set this prop, then component became a Controlled Component
- type: String
- required: false
- default: '.'
- options:
- '.' - dot is decimal separator
- ',' - comma is decimal separator
Define number decimal separator
- type: Number
- required: false
- default: 10
Set maximum numbers of digits integer part (digits before decimal separator)
- type: Number
- required: false
- default: 10
Set maximum numbers of digits fraction part (digits after decimal separator)
- type: Boolean
- required: false
- default: true
- options:
- true - number can be positive
- false - number may not be positive
Define if number may be positive
- type: Boolean
- required: false
- default: true
- options:
- true - number can be negative
- false - number may not be negative
Define if number may be negative
- type: boolean or ' ' (space)
- required: false
- default: false
- options:
- false - thousand separator is disabled
- ' ' (space) - thousand separator is enabled and separate values by space
- true - thousand separator is enabled.
- If decimal separator is dot then thousand separator is comma.
- If decimal separator is comma then thousand separator is dot.
Define number decimal separator
- type: string
- required: false
- default: none
Allow to set placeholder to empty input
- type: Function (callback)
- required: false
- function attributes:
- evt - react event
- modelValue - correct javascript number
- viewValue - string value visible in input
Define callback which will be trigger on any number change
Yes it works but remember to use it :
var DynamicNumber = require('react-dynamic-number').default;
First of all you need to get ref to this component. How to get ref:
<DynamicNumber ref={input => { this.input = input }} ...
Ref should be use in componentDidMount or componentDidUpdate because there we are sure that everything is ready.
Now you can call focus method on this ref.
componentDidMount() {
this.input.focus();
}
Example from documentation Adding a Ref to a Class Component
Warning: As you can read here Refs and Functional Components
You may not use the ref attribute on functional components because they don't have instances:
MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent