Simple numpad with display field, that also acts as an optional input field. It limits unser entry to numbers (positive and negative) with up to 2 decimals. It accepts a change handler function that is called with the current text value in the input field.
npm install --save @tillhub/numpad
import React, { Component } from 'react'
import Numpad from '@tillhub/numpad'
class Example extends Component {
render () {
return (
<Numpad />
)
}
}
The component accepts optional properties.
Property | type | required | example | default | description |
---|---|---|---|---|---|
handleChange | function | no | text => console.log(text) | () => {} | This function will be called with the current text in the input field. It is triggered on every click in the keypad and on every change in the input field. |
startValue | string | no | '15' | null | The input field will be initiated with this value. |
disabled | boolean | no | true | false | If set to true, the input field and the keypad will be greyed out and disabled. |
withoutInputField | boolean | no | true | false | If set to true, the input field will merely display values but not accept manual entry. |
decimalSeparator | string | no | ',' | '.' | Pass in optional decimal separator. For now, only ',' is allowed as an alternative to '.'. |
width | string | no | '800px' | '400px' | Determines the width of the input field and keypad. Both will have equal width. |
import React, { Component } from 'react'
import Numpad from '@tillhub/numpad'
class Example extends Component {
render () {
return (
<Numpad
handleChange={text => console.log(text)}
startValue='67.5'
width='500px'
/>
)
}
}
You can pass in children to fill a slot between the input field and keypad. A use case is for example to indicate a total.
import React, { Component } from 'react'
import Numpad from '@tillhub/numpad'
class Example extends Component {
render () {
return (
<Numpad>
<div>of 200</div>
</Numpad>
)
}
}
MIT © qtotuan