# rmc-picker

> React Mobile Picker Component(web and react-native)

Latest version **5.0.10** (published 2019-07-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install rmc-picker
pnpm add rmc-picker
yarn add rmc-picker
bun add rmc-picker
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 5.0.10 |
| Published | 2019-07-03 |
| First published | 2015-12-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 150.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 247 |
| Maintainers | duxiaodong, paranoidjk, silentcloud, warmhug, yiminghe, zhang740 |
| Keywords | react, react-component, react-m-picker, m-picker |

## Links

- npm: https://www.npmjs.com/package/rmc-picker
- Repository: https://github.com/react-component/m-picker
- Issues: https://github.com/react-component/m-picker/issues
- npm.io page: https://npm.io/package/rmc-picker

## Dependencies (4)

- [classnames](https://npm.io/package/classnames.md) ^2.2.6
- [rmc-dialog](https://npm.io/package/rmc-dialog.md) ^1.1.1
- [rmc-feedback](https://npm.io/package/rmc-feedback.md) ^2.0.0
- [babel-runtime](https://npm.io/package/babel-runtime.md) 6.x

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 5.0.10 (latest) — 2019-07-03
- 5.0.0-alpha.9 (beta) — 2017-10-11
- 5.0.9 — 2019-06-04
- 5.0.8 — 2019-04-04
- 5.0.7 — 2019-04-04
- 5.0.6 — 2019-03-18
- 5.0.5 — 2018-05-08
- 5.0.4 — 2017-11-30
- 5.0.3 — 2017-10-18
- 5.0.2 — 2017-10-18
- 5.0.1 — 2017-10-18
- 5.0.0 — 2017-10-12
- 5.0.0-alpha.8 — 2017-10-11
- 5.0.0-alpha.7 — 2017-09-28
- 5.0.0-alpha.6 — 2017-09-20
- … 106 more at https://npm.io/package/rmc-picker/versions

## README

# rmc-picker
---

React Mobile Picker Component (web and react-native)


[![NPM version][npm-image]][npm-url]
![react-native](https://img.shields.io/badge/react--native-%3E%3D_0.30.0-green.svg)
![react](https://img.shields.io/badge/react-%3E%3D_15.2.0-green.svg)
[![build status][travis-image]][travis-url]
[![Test coverage][coveralls-image]][coveralls-url]
[![gemnasium deps][gemnasium-image]][gemnasium-url]
[![npm download][download-image]][download-url]

[npm-image]: http://img.shields.io/npm/v/rmc-picker.svg?style=flat-square
[npm-url]: http://npmjs.org/package/rmc-picker
[travis-image]: https://img.shields.io/travis/react-component/m-picker.svg?style=flat-square
[travis-url]: https://travis-ci.org/react-component/m-picker
[coveralls-image]: https://img.shields.io/coveralls/react-component/m-picker.svg?style=flat-square
[coveralls-url]: https://coveralls.io/r/react-component/m-picker?branch=master
[gemnasium-image]: http://img.shields.io/gemnasium/react-component/m-picker.svg?style=flat-square
[gemnasium-url]: https://gemnasium.com/react-component/m-picker
[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-picker.svg?style=flat-square
[download-url]: https://npmjs.org/package/rmc-picker

## Screenshots

<img src="https://os.alipayobjects.com/rmsportal/fOaDvpIJukLYznc.png" width="288"/>


## Development

```
npm i
npm start
```

## Example

http://localhost:8000/examples/

online example: http://react-component.github.io/m-picker/

## react-native

```
npm run rn-init
npm run watch-tsc
react-native start
react-native run-ios
```

## install

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


# 4.x beta docs

> If you are looking for 3.x doc, please see [rmc-picker@3.x](https://github.com/react-component/m-picker/tree/3.x)


## Usage
```jsx
<MultiPicker
  selectedValue={this.state.value}
  onValueChange={this.onChange}
>
  <Picker indicatorClassName="my-picker-indicator">
    <Picker.Item className="my-picker-view-item" value="1">one</Picker.Item>
    <Picker.Item className="my-picker-view-item" value="2">two</Picker.Item>
    <Picker.Item className="my-picker-view-item" value="3">three</Picker.Item>
    <Picker.Item className="my-picker-view-item" value="4">four</Picker.Item>
    <Picker.Item className="my-picker-view-item" value="5">five</Picker.Item>
    <Picker.Item className="my-picker-view-item" value="6">six</Picker.Item>
    <Picker.Item className="my-picker-view-item" value="7">seven</Picker.Item>
    <Picker.Item className="my-picker-view-item" value="8">eight</Picker.Item>
  </Picker>
  <Picker indicatorClassName="my-picker-indicator">
    <Picker.Item className="my-picker-view-item" value="11">eleven</Picker.Item>
    <Picker.Item className="my-picker-view-item" value="12">twelve</Picker.Item>
    <Picker.Item className="my-picker-view-item" value="13">thirteen</Picker.Item>
    <Picker.Item className="my-picker-view-item" value="14">fourteen</Picker.Item>
    <Picker.Item className="my-picker-view-item" value="15">fifteen</Picker.Item>
    <Picker.Item className="my-picker-view-item" value="16">sixteen</Picker.Item>
    <Picker.Item className="my-picker-view-item" value="17">seventeen</Picker.Item>
    <Picker.Item className="my-picker-view-item" value="18">eighteen</Picker.Item>
  </Picker>
</MultiPicker>
```

## API

### MultiPicker props

| name     | description    | type     | default      |
|----------|----------------|----------|--------------|
|className(web) | additional css class of root dom node | String |  |
|prefixCls(web) | prefix class | String | '' |
|defaultSelectedValue(web) | default selected values | string[]/number[] |  |
|selectedValue | current selected values | string[]/number[] |  |
|onValueChange | fire when picker change | Function(value) |  |


### Picker props

| name     | description    | type     | default      |
|----------|----------------|----------|--------------|
|className(web) | additional css class of root dom node | String |  |
|prefixCls(web) | prefix class | String | '' |
|defaultSelectedValue(web) | default selected values | string/number |  |
|selectedValue | current selected values | string/number |  |
|onValueChange | fire when picker change | Function(value) |  |
|disabled     | whether picker is disabled | bool | false
|indicatorClassName     | className of indicator | String |
|indicatorStyle     | style of indicator | object |

### Picker.Item props
| name     | description    | type     | default      |
|----------|----------------|----------|--------------|
|className(web) | additional css class of root dom node | String |  |
|value | value of item | String |  |

## Test Case

```
npm test
npm run chrome-test
```

## Coverage

```
npm run coverage
```

open coverage/ dir

## License

rmc-picker is released under the MIT license.

---
_Source: https://npm.io/package/rmc-picker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._