Reactjs component for alphabetical sorting.
#Example
yarn
yarn start#Install
yarn react-alphabet-sorter --saveSorter 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)
}
}| 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 |
| chunkByLetter | boolean | undefined | allow make chunks by letter |
| handleCheck | function | undefined | callback, which fires after click or change item. Receives 1 argument: array of selected items |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent