https://github.com/gem-mine/rc-input-number

https://github.com/gem-mine/rc-input-number

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/gem-mine/rc-input-number
• Owner: gem-mine
• License: mit
• Created: 2020-02-04T01:42:35.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2021-01-19T13:21:59.000Z (about 4 years ago)
• Last Synced: 2024-04-13T19:06:05.555Z (10 months ago)
• Language: JavaScript
• Size: 343 KB
• Stars: 0
• Watchers: 6
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: HISTORY.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# rc-input-number

---

input number ui component for react

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

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

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

[![david-dm deps][david-dm-image]][david-dm-url]

[![devDependencies Status](https://david-dm.org/react-component/input-number/dev-status.svg)](https://david-dm.org/react-component/input-number?type=dev)

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

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

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

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

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

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

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

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

[david-dm-image]: https://david-dm.org/react-component/input-number/status.svg

[david-dm-url]: https://david-dm.org/react-component/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/rc-input-number.svg?style=flat-square

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

## Screenshots



## install

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

## Usage

```js

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

var React = require('react');

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

ReactDOM.render(, container);

```

## Development

```

npm install

npm start

```

## Example

http://127.0.0.1:8000/examples/

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

## API

### props

    

    

        name

        type

        default

        description

    

    

    

        

          prefixCls

          string

          rc-input-number

          Specifies the class prefix

        

        

          min

          Number

          

          Specifies the minimum value

        

        

          onClick

          

          

          

        

        

          placeholder

          string

          

          

        

        

          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

        

        

          required

          Boolean

          false

          Specifies that an InputNumber is required

        

        

          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 

        

        

          name

          String

          

          Specifies the name of an InputNumber

        

        

          id

          String

          

          Specifies the id of an InputNumber

        

        

          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

        

        

          onPressEnter

          Function

          

          The callback function that is triggered when Enter key is pressed.

        

        

          onFocus

          Function

          

          Called when an element gets focus

        

        

          style

          Object

          

          root style. such as {width:100}

        

        

          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

        

        

          pattern

          string

          

          Specifies a regex pattern to be added to the input number element - useful for forcing iOS to open the number pad instead of the normal keyboard (supply a regex of "\d*" to do this) or form validation

        

        

          decimalSeparator

          string

          

          Specifies the decimal separator

        

    

## Keyboard Navigation

* When you hit the ⬆ or ⬇ key, the input value will be increased or decreased by `step`

* With the Shift key (Shift+⬆, Shift+⬇), the input value will be changed by `10 * step`

* With the Ctrl or ⌘ key (Ctrl+⬆ or ⌘+⬆ or Ctrl+⬇ or ⌘+⬇ ), the input value will be changed by `0.1 * step`

## Test Case

```

npm test

npm run chrome-test

```

## Coverage

```

npm run coverage

```

open coverage/ dir

## License

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