Sh-react-picker NPM

sh-picker-scroll

customed rmc-picker for react v18. (rmc-picker hasn't been updated 3years.)

React Mobile Picker Component (web)

Screenshots

Development

npm i
npm start

~~## Example~~

~~http://localhost:8000/examples/~~

~~online example: http://cccraim.github.io/m-picker/~~

~~## react-native~~

install

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