Feathers-react NPM

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} />
      )} />
  );
};