React Ultra Select

A good substitution for HTML select and option tags on mobile platforms, based on React.

Basically React Ultra Select works like the select and option tags in HTML, however, it supports multi-column selection with event callbacks for implementing more powerful features. Very handy.

Version <= 1.0.10 uses iScroll which provides smoother scrolling experience, however, increases file size significantly.

Features

• Compatible

  Works fine on all platforms, no matter iOS, Android or Desktop browsers.

• Dynamic

  You can pass groups of data to React Ultra Select. It will handle data automatically and divide them into N columns respectively.

  Also, you can customize the number visible rows and the height of each row, pass images or any React node as an selection other than a string.

• Extensible

  Supports 6 types of events for composing more powerful components. For example, I write a React Date Picker based on this component.

How to use

npm i react-ultra-select --save

Using it in your project:

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import UltraSelect from 'react-ultra-select'

class SomeComponent extends Component {
    render() {
        var columns = [
            {
                list: [
                    {key: 1, value: 'Male'},
                    {key: 2, value: 'Female'},
                    {key: 3, value: 'Others'},
                ],
                defaultIndex: 1,
            },
        ]
        return <UltraSelect columns={columns}></UltraSelect>
    }
}

Props

Required Props

• columns

  Type: Array

  Description: an array with each element containing one selection list and its default index.

  Sample:

  [
      {
          list: [{
              key: 1,
              value: 1
          }],
          defaultIndex: 0,
      }
  ]

Optional Props

Events/Callbacks

• onOpen()

  Will be called when the selection panel shows up.

• onClose()

  Will be called when the selection panel hides.

• onConfirm()

  Will be called when the confirm button or backdrop is clicked.

• onCancel()

  Will be called when the cancel button is clicked.

• onDidSelect(index, selectedValue)

  Will be called when scrolling stops, useful for real-time selection. index is the index of scrolling column and selectedValue is the newly selected element.

• onSelect(index, selectedValue)

  Will be called when scrolling and selected value is changed, useful for playing sound effects or so. index is the index of scrolling column and selectedValue is the newly selected element.

Getter

• selectedValues

  Get the current array of selected values, each element contains a key and a value. Remember to attach ref to <UltraSelect>.

  this.refs.ultraSelect.selectedValues

Examples

• Online

  Open https://swenyang.github.io/react-ultra-select to see online demo.

• Local

  Clone this repo, and run npm run examples. Then navigate to http://localhost:8080 to see examples.

TODO

• Removing iscroll-probe

  React Ultra Select currently relies on React IScroll and iscroll-probe, it's a bit too heavy. Should find a smaller solution for calculating selected indecies.

• Smoother scrolling experience with div

• Hide vertical scroll bars in non-webkit browsers such as Firefox/IE/Opera etc.

• Transitions

  Add some smooth transitions for backdrop and columns showing up and hiding.

• Optimizations