react-alphabet-sorter
Reactjs component for alphabetical sorting.
#Example
In dev mode
npm i
npm run startOr see live-demo
#Install
npm i react-alphabet-sorter --saveUsage
Sorter takes an array of values, which are passed in "asGroup" option and sorted by their label.
import React from 'react'
import AlpabetSorter from 'react-alphabet-sorter'
const data = [
{ value: 1, label: 'Audi'},
{ value: 2, label: 'Honda'},
{ value: 3, label: 'Hundai'},
{ value: 4, label: 'BMW'},
{ value: 5, label: 'Bentley'},
{ value: 7, label: 'Opel'},
{ value: 8, label: 'Mersedes'},
{ value: 9, label: 'Akura'},
{ value: 10, label: 'Porshe'},
{ value: 11, label: 'Kia'},
{ value: 12, label: 'ВАЗ'}
]
export default class Demo extends React.Component {
render() {
return (
<div>
<h2>Simple list</h2>
<AlpabetSorter
asGroup={data}
asName='usage_example'
type='radio'
handleCheck={this.handleSorter} />
</div>
)
}
handleSorter = (selected) => {
console.log(selected)
}
}Options
| Properties | Type | Default | Description |
|---|---|---|---|
| asGroup | array | [] | array of data |
| asName | string | 'sorter' | value, which is passed to the html attribute "name" (for component with props "radio" and "checkbox") |
| selected | array | [] | sets selected elements after init |
| type | string | 'text' | defines component view type and layout. Sorter have 4 type: "radio"(will be rendered as collection of input "radio"), "checkbox"(will be rendered as collection of input "checkbox"), "link"(will be rendered as collection of links), "text"(will be rendered as collection of text nodes) |
| itemOptions | object | {} | object with custom properties, which is passed to sorter items |
| labelKey | string | 'label' | key, which is used to find item label |
| valueKey | string | 'value' | key, which is used to find item value |
| navigator | boolean | true | defines whether to show the alphabetical signs |
| chunkLength | number | undefined | defines whether to show the list items or chunks |
| handleCheck | function | undefined | callback, which fires after click or change item. Receives 1 argument: array of selected items |