feathers-react

A Feathers real-time React component library to display data

Install

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 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 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 <Pagination /> component. | No | true | | paginationProps | An Object to override rc-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 => <img src={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 <Table /> component takes a client prop which is a Feathers client.

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 (
    <Table service={service} query={query}>
      <Column
        title="Image"
        dataSource="imageUrl"
        render={(data, row) => (
          <img alt={row.name} src={data} />
        )} />
      <Column
        title="Name"
        dataSource="name" />
    </Table>
  );
};

Container props

The <Container /> component is a generic wrapper that you can use to present data in a different format than tabular. It shares most props with the <Table /> 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 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) => <SomeComponent key={row.id} data={row} /> | | 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 <Pagination /> 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's props. | No | undefined |

Example

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 (
    <Container
      service={service}
      query={query}
      itemsWrapper={<div className="messages-wrapper" />}
      separator={message => <h3>Messages by {message.author}</h3>}
      renderItem={message => (
        <Message key={message.id} message={message} />
      )} />
  );
};

License

MIT © Silvestre Herrera