GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → react-component → M Picker

react-component / M Picker

React Mobile Picker(web & react-native)

Programming Languages

typescript
32286 projects

rmc-picker

React Mobile Picker Component (web and react-native)

NPM version react-native react build status Test coverage gemnasium deps npm download

Screenshots

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

4.x beta docs

If you are looking for 3.x doc, please see [email protected]

Usage

<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.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].