React-select-scrollable NPM

react-select-scrollable

desktop_view mobile_view

Smart Select options.
When on desptop it will work as normal select tag
When on mobile it will open apple like PopUp

Install

npm install --save react-select-scrollable

Usage

import React, { Component } from 'react'

import ExampleComponent from 'react-select-scrollable'

export default class App extends Component {

  constructor(props) {
    super(props)
    this.state = {
      selectedNumber: null
    }
  }


  render() {
    const { selectedNumber } = { ...this.state }

    return (
      <div>
        <ExampleComponent data={[
          { value: '1', displayName: "One" },
          { value: '2', displayName: "Two" },
          { value: '3', displayName: "Three" },
          { value: '4', displayName: "Four" },
          { value: '5', displayName: "Five" },
          { value: '6', displayName: "Six" },
          { value: '7', displayName: "Seven" },
        ]}
          heading="Choose"
          mobileViewThreshold={450}
          onSelectedDataChange={(data) => this.setState({ selectedNumber: data })} />
        <div>
          {!selectedNumber && <h1>You have not selected any number yet</h1>}
          {selectedNumber && <h1>You have selected {selectedNumber}</h1>}
        </div>
      </div>
    )
  }
}

Parameter	Type	Use
data	Array	Options you want to choose from
heading	string	Text will appear as select tag heading
mobileViewThreshold	number	will open modal when screen size is less than `mobileViewThreshold` else simple select tag
onSelectedDataChange	function	Callback function that will run when user select from option
classNameForModal	string	Custom class for Modal component
classNameForSelectTag	string	Custom class for Select component