Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/silvestreh/feathers-react

A FeathersJS real-time React component library to display data
https://github.com/silvestreh/feathers-react

Last synced: 3 months ago
JSON representation

A FeathersJS real-time React component library to display data

Lists

README 

        
# feathers-react [![CircleCI](https://circleci.com/gh/silvestreh/feathers-react.svg?style=svg)](https://circleci.com/gh/silvestreh/feathers-react) [![codecov](https://codecov.io/gh/silvestreh/feathers-react/branch/master/graph/badge.svg?token=X8yCXb8yva)](https://codecov.io/gh/silvestreh/feathers-react)



> A [Feathers](https://www.feathersjs.com) real-time React component library to display data



## Install



```bash

npm install --save feathers-react

```



## Documentation



`feathers-react` consists of just a handful of React Components to help you display data coming from your Feathers API in real-time. Make sure to go through the [channels docs](https://docs.feathersjs.com/api/channels.html) to set up real-time events, otherwise the components won't update _automagically_.



### Table props



| Name | Description | Required | Default value |

|------|-------------|----------|---------------|

| `service` | The Feathers service to get data from. | Yes | `undefined` |

| `query` | A [Feathers query](https://docs.feathersjs.com/api/databases/querying.html) object to run against the specified `service`. | No | `{}` |

| `keyProp` | The result's property to use as `key`. | No | `'id'` |

| `onRowClick` | Click event handler for a table row. The function takes two arguments: the row's data and its `index`. | No | `(row, index) => {}` |

| `sortable` | A `Boolean` that determines wether a header can be clicked to sort results | No | `undefined` |

| `onDataChange` | A callback `Function` that is invoked after the table's data changed | No | `undefined` |

| `countTemplate` | A string to use as template for showing items count. For example, `'Showing {start} to {end} of {total}'` would render something like `Showing 1 to 10 of 25`. | No | `undefined` |

| `language` | The locale name to render translated text. Supported locales are `['fr_FR', 'en_US', 'es_ES']`. | No | `'en_US'` |

| `usePagination` | Determines wether to use the `` component. | No | `true` |

| `paginationProps` | An `Object` to override [`rc-pagination`](https://github.com/react-component/pagination)'s props. | No | `undefined` |



### Column props



| Name | Description | Required | Default value |

|------|-------------|----------|---------------|

| `dataSource` | The result's property to extract data from. | Only when `render` is not defined | `undefined` |

| `render` | A render function that takes two arguments: the data for the column and the row's data. For example, `imageUrl => ` would render an image in the table cell. | No | `undefined` |

| `title` | A string to use as the header for the column. | No | `undefined` |

| `width` | The column's visual width, in pixels. | No | `undefined` |



### Example



In this simple example, the `` component takes a `client` prop which is a [Feathers client](https://docs.feathersjs.com/api/authentication/client.html).



```jsx

import React from 'react';

import { Column, Table } from 'feathers-react';

import 'feathers-react/style.css';



export default ({ client }) => {

  const service = client.service('some-service');

  const query = { $sort: { name: 1 } };



  return (

    

       (

          {row.name}

        )} />

      

    

  );

};

```



### Container props



The `` component is a generic wrapper that you can use to present data in a different format than tabular. It shares most props with the `` component, the main difference is that it doesn't take any children, but has a `renderItem` prop to render data.



| Name | Description | Required | Default value |

|------|-------------|----------|---------------|

| `service` | The Feathers service to get data from. | Yes | `undefined` |

| `query` | A [Feathers query](https://docs.feathersjs.com/api/databases/querying.html) object to run against the specified `service`. | No | `{}` |

| `emptyState` | An HTMLElement, React component, or String to render when there are no results. | No | `undefined` |

| `keyProp` | The result's property to use as `key`. | No | `'id'` |

| `renderItem` | A render function that can return a React component. The function takes two arguments: the row's data and its `index`. | Yes | `(row, index) => ` |

| `itemsWrapper` | An HTMLElement or React component that will wrap rendered children. | No | `undefined` |

| `separator` | A render function to use as a separator. It takes one argument: the current result being iterated. It requires both: `itemsWrapper` and `query.$sort` to be defined. | No | `undefined` |

| `countTemplate` | A string to use as template for showing items count. For example, `'Showing {start} to {end} of {total}'` would render something like `Showing 1 to 10 of 25`. | No | `undefined` |

| `language` | The locale name to render translated text. Supported locales are `['fr_FR', 'en_US', 'es_ES']`. | No | `'en_US'` |

| `usePagination` | Determines wether to use the `` component. | No | `false` |

| `hidePaginationOnSinglePage` | Hides the pagination component when there's only one page of data | No | `undefined` |

| `paginationProps` | An `Object` to override [`rc-pagination`](https://github.com/react-component/pagination)'s props. | No | `undefined` |



### Example



```jsx

import React from 'react';

import { Container } from 'feathers-react';

import 'feathers-react/style.css';

import Message from './message';



export default ({ client }) => {

  const service = client.service('messages');

  const query = { $sort: { author: 1 } };



  return (

    }

      separator={message => 
Messages by {message.author}
}

      renderItem={message => (

        

      )} />

  );

};

```



## License



MIT © [Silvestre Herrera](https://github.com/silvestreh)