search

rajanlagah / react-select-scrollable

Suitcase lock like digit selections
3 stars 0 forks source link

readme

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

NPM JavaScript Style Guide

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