https://github.com/react-component/m-input-number

input-number mobile ui component for react (web & react-native)
https://github.com/react-component/m-input-number

Last synced: 4 months ago
JSON representation

input-number mobile ui component for react (web & react-native)

• Host: GitHub
• URL: https://github.com/react-component/m-input-number
• Owner: react-component
• License: mit
• Created: 2017-09-18T02:36:31.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2021-07-12T21:16:49.000Z (over 4 years ago)
• Last Synced: 2025-08-08T17:33:50.646Z (5 months ago)
• Language: TypeScript
• Size: 589 KB
• Stars: 17
• Watchers: 2
• Forks: 10
• Open Issues: 17
• Metadata Files:
  • Readme: README.md
  • Changelog: HISTORY.md
  • License: LICENSE.md

Awesome Lists containing this project

README

          
# rmc-input-number

---

input number ui component for react (web & react-native)

[![NPM version][npm-image]][npm-url]

[![build status][travis-image]][travis-url]

[![Test coverage][coveralls-image]][coveralls-url]

[![gemnasium deps][gemnasium-image]][gemnasium-url]

[![node version][node-image]][node-url]

[![npm download][download-image]][download-url]

[npm-image]: http://img.shields.io/npm/v/rmc-input-number.svg?style=flat-square

[npm-url]: http://npmjs.org/package/rmc-input-number

[travis-image]: https://img.shields.io/travis/react-component/m-input-number.svg?style=flat-square

[travis-url]: https://travis-ci.org/react-component/m-input-number

[coveralls-image]: https://img.shields.io/coveralls/react-component/m-input-number.svg?style=flat-square

[coveralls-url]: https://coveralls.io/r/react-component/m-input-number?branch=master

[gemnasium-image]: http://img.shields.io/gemnasium/react-component/m-input-number.svg?style=flat-square

[gemnasium-url]: https://gemnasium.com/react-component/m-input-number

[node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square

[node-url]: http://nodejs.org/download/

[download-image]: https://img.shields.io/npm/dm/rmc-input-number.svg?style=flat-square

[download-url]: https://npmjs.org/package/rmc-input-number

## Screenshots

- web:

  

- react-native:

  

## install

[![rmc-input-number](https://nodei.co/npm/rmc-input-number.png)](https://npmjs.org/package/rmc-input-number)

## Usage

```js

var InputNumber = require('rmc-input-number');

var React = require('react');

var ReactDOM = require('react-dom');

ReactDOM.render(, container);

```

## Development

```

npm install

npm run watch-tsc

npm start

```

## Example

http://127.0.0.1:8000/examples/

online example: http://react-component.github.io/m-input-number/examples/

## react-native

```

npm run watch-tsc

npm run rn-init

react-native run-ios

```

## API

### props

    

    

        name

        type

        default

        description

    

    

    

        

          min

          Number

          

          Specifies the minimum value

        

        

          max

          Number

          

          Specifies the maximum value

        

        

          step

          Number or String

          1

          Specifies the legal number intervals

        

        

          precision

          Number

          

          Specifies the precision length of value

        

        

          disabled

          Boolean

          false

          Specifies that an InputNumber should be disabled

        

        

          focusOnUpDown

          Boolean

          true

          whether focus input when click up or down button

        

        

          autoFocus

          Boolean

          false

          Specifies that an InputNumber should automatically get focus when the page loads

        

        

          readOnly

          Boolean

          false

          Specifies that an InputNumber is read only 

        

        

          value

          Number

          

          Specifies the value of an InputNumber

        

        

          defaultValue

          Number

          

          Specifies the defaultValue of an InputNumber

        

        

          onChange

          Function

          

          Called when value of an InputNumber changed

        

        

          style

          Object

          

          root style. such as {width:100}

        

        

          styles

          ReactNative StyleSheet

          

          component's stylesheet, can use lib/styles

        

        

          upStyle

          Object

          

          up step wrap style. `react native only`

        

        

          downStyle

          Object

          

          down step style. `react native only`

        

        

          inputStyle

          Object

          

          input style. `react native only`

        

        

          upHandler

          React.Node

          

          custom the up step element

        

        

          downHandler

          React.Node

          

          custom the down step element

        

        

          formatter

          (value: number|string): displayValue: string

          

          Specifies the format of the value presented

        

        

          parser

          (displayValue: string) => value: number

          `input => input.replace(/[^\w\.-]*/g, '')`

          Specifies the value extracted from formatter

        

    

## Test Case

```

npm test

npm run chrome-test

```

## Coverage

```

npm run coverage

```

open coverage/ dir

## License

rmc-input-number is released under the MIT license.