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

Property	Type	Default	description
data	array	[]	data for select element.
selectProps	object	{}	properties for html select element
searchPattern	function	()=>{}	Returns a string value. Searching is done in this string value.
caseSensitive	bool	false	controls search case sensitive
pageSize	integer	5	page size for options.
pageSizeOptions	array	[5,10,15,20]	options to change page size.
onPageChange	function	()=>{}	function triggered after page change
onPageSizeChange	function	()=>{}	function triggered after page size change
previousText	string	"<"	value inside the previous button
nextText	string	">"	value inside the next button
ofText	string	"of"	value for of text
pageText	string	"Page"	value for page text
searchText	string	"Search"	value for search text
rowsText	string	"rows"	value for rows text
option	function	must be set	function which return option for every data (see documentation for usage)
showPagination	bool	true	shows pagination component
showSearch	bool	true	shows search component

License

MIT © hasankzl