react-select-scrollable

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

License

MIT © rajanlagah

react-select-scrollable

Todo

• Make tolerance bit more accurate.
• Dynamic Threshold for mobile view.
• Select tag heading
• Add functional component
• Select Tag UI
• remove scroll-bar option
• show cancel button at bottom
• mobile preview gif
• Testing
• GIF update
• README.md update
• Custom class names for component
• Dont remove select tag when modal open
• Do some animation when modal open