react-alphabet-sorter

Reactjs component for alphabetical sorting.

#Example

In dev mode

npm i
npm run start

Or see live-demo

react-alphabet-sorter

#Install

npm i react-alphabet-sorter --save

Usage

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