@tillhub/numpad

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.

Install

npm install --save @tillhub/numpad

Usage

import React, { Component } from 'react'

import Numpad from '@tillhub/numpad'

class Example extends Component {
  render () {
    return (
      <Numpad />
    )
  }
}

Properties

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'
      />
    )
  }
}

Slots

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>
    )
  }
}

License

MIT © qtotuan