https://github.com/jonespen/react-unsort

🔀 Render props for building accessible sortable stuff in React
https://github.com/jonespen/react-unsort

a11y flowtype react

Last synced: about 1 month ago
JSON representation

🔀 Render props for building accessible sortable stuff in React

• Host: GitHub
• URL: https://github.com/jonespen/react-unsort
• Owner: jonespen
• License: mit
• Archived: true
• Created: 2017-11-19T18:29:18.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-01-09T09:54:53.000Z (over 6 years ago)
• Last Synced: 2024-05-09T07:32:52.961Z (about 2 months ago)
• Topics: a11y, flowtype, react
• Language: JavaScript
• Homepage: https://jonespen.github.io/react-unsort
• Size: 528 KB
• Stars: 20
• Watchers: 1
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-react-function-as-child-components - react-unsort

README

        
# react-unsort

Render prop component for accessible sorting.

[![Build Status][build-badge]][build]

[![Coverage][coverage-badge]][coverage]

[build-badge]: https://img.shields.io/travis/jonespen/react-unsort/master.svg?style=flat-square

[build]: https://travis-ci.org/jonespen/react-unsort

[coverage-badge]: https://img.shields.io/codecov/c/github/jonespen/react-unsort.svg?style=flat-square

[coverage]: https://codecov.io/github/jonespen/react-unsort

## The problem

You want to sort something in react (e.g. a list or some table rows), and have

full control over styling.

## This solution

This follows the patterns in [downshift](https://github.com/paypal/downshift) to

expose an API that renders nothing and simply encapsulates the logic of a

sorting component. Note that it doesn't do any actual sorting, only setup aria, keyboard handling and handle sort directons for you.

## Installation

```sh

npm install react-unsort

```

> This package also depends on react. Please make sure you have that installed

> as well.

## Usage

Todo: fill out this with props and stuff

```js

 {

    return (

      

        

          

            

              Name {sortKey === "name" && sortDirection}

            

            

              Age {sortKey === "age" && sortDirection}

            

            Country (not sortable)

          

        

        

          {rows.map(row => {

            return (

              

                {row.name}

                {row.age}

                {row.country}

              

            );

          })}

        

      

    );

  }}

/>

```

## Props

### `render:(RenderProps) => React.Node`

This is where you render whatever you want to based on the state of react-unsort.

Gets the following props:

```

getSortProps: (key: string) => SortProps

sortKey: ?string

sortDirection: ?SortDirection

```

### `onSort:({ sortKey: ?string, sortDirection: "asc" | "desc" | null }) => void`

Called when the element with `getSortProps` applied is clicked or enter key is pressed.

## Motivation

There are [other, more advanced solutions](https://reactabular.js.org/) to this

problem, but I found them way to bloated and hard to style, especially using

styled-components.

## Credits

Thanks to [Kent C. Dodds](https://github.com/kentcdodds/) for his work on

Downshift, which greatly inspired this lib.