react-pageable-select v1.0.4

react-pageable-select

pageable select compnent for react

live demo

https://react-pageable-select.netlify.app/

Install

npm install  react-pageable-select

Usage

import React, { Component } from 'react'
import ReactPageableSelect from 'react-pageable-select'
import 'react-pageable-select/dist/index.css'

class Example extends Component {
  render() {
    return (
      <ReactPageableSelect
        data={data} // data for select
        // props for html select element
        selectProps={{
          multiple: true,
          onChange: (e) => alert('selected value: ' + e.target.value)
        }}
        searchPattern={(d) => d.name + ' ' + d.id} // the worlds you write in search box will be searched in search pattern
        option={(
          singleData,
          index // option value for select takes single data and index
        ) => (
          <option key={index}>
            {singleData.name} - {singleData.phone}
          </option>
        )}
      />
    )
  }
}

styling

you can overrite these class for changing style (you can be contribute for styling)

.rps-pagination
.rps-pagination-button
.rps-search-div
.rps-search-input
.rps-select

props

License

MIT © hasankzl