Feathers React Components

feathers-rc is a collection of React components designed to make building react apps backed by feathersjs a delightful experience.

FeathersApp acts as a root component, which provides access to the feathers app to other components contained within it.

FeathersGet and FeathersQuery allow you to declaritively query the server, passing data and other releavent data.

A contrived example

import React, { Component } from "react";
import { FeathersApp } from "feathers-rc";
import TodoList from "./TodoList";

class App extends Component {
  render() {
    return (
      <FeathersApp host={"localhost"} port={3030}>
        <FeathersQuery service={"todos"} query={{ complete: false }} realtime>
          {({ data }) => <TodoList todos={data} />}
        </FeathersQuery>
      </FeathersApp>
    );
  }
}

export default App;

IMPORTANT!

Please not that this package is in early development and is not production ready!!!

Installation

npm install --save feathers-rc

Components

<FeathersApp>

Uses the context api to provide access to the. This component must wrap all other feathers-rc components.

<App>
  <FeathersApp host={example.com} port={3030}>
    ... your secret sauce
  </FeathersApp>
</App>

Input Props

app - (optional) If you need to customize your app, you can intialize it yourself and pass it in as a prop. If you do, the host and port will be ignored.

host - Address of the host to connect to

port - Websocket port for the host is listening on.

Child Properties

connected <boolean> - True if the socketio connection is live

app <object> - Access the app directly when needed

<FeathersQuery>

Fetches an arbitrary number of

<FeathersApp host={"localhost"} port={3030}>
  <FeathersQuery
    service="test"
    query={{ roomId: 5 }}
    limit={10}
    skip={3}
    realtime
  >
    {({ recordCount }) => <div>Count: {recordCount}</div>}
  <FeathersQuery/>
</FeathersApp>

Props

query <number> - A query to run on the service. The result will be passed to the data prop (normalized for pagination).

The query is formatted as a standard feathers query.

sort <number> - An object in which the key is the data key to sort by, and the value is equal 1 for ascending or -1 for descending. ASC and DESC constants are exported from the library for your convenience. See the sorting documentation in the feathers docs for more info.

select <[string]> - An array of strings containing the keys to include in the response data. If not specified, the entire document is returned.

limit <number> - Number of records per page. default = 0

skip <number> - Number of records to skip. default = 10

realtime - If true, subscribe to changes and re-run the query if any changes are detected to the loaded queries.

transform - Transformation function to run on data before it's passed down.

Child Properties

app <object> - Access the app directly when needed

data <object, array, or null> - The data returned from the query.

• Null if the query has not been returned or has no data.
• Contains the data returned from the query.
• Data will be normalized if paginated.
• If a transform function was passed to the parent component, the data will have been processed by the transformation function.

paginated <boolean> - Indicates whether the response is paginated.

pageCount <number> - Number of the current pages available.

pageNum <number> - Number of the current page of results.

pageCount <number> - Number of pages available.

startIndex <number> - Index of the first record within the query (the value passed to skip)

nextPageIndex <number> - The start index of the next page (use with skip). Null if no more pages available or pagination is disabled.

prevPageIndex <number> - The start index of the previous page (use with skip). Null if no more pages available or pagination is disabled.

recordCount <number> - Total nunber or record found in the query. Null if the data is not included

service <object> - Direct access to the service the query was run on.

error <object> - Error object, if holding any error producted by the most recent request. Will be null if no error was reported.

• name <string> - Name of the error
• message <string> - The error message.
• code <number> - Error code
• errors <object> - An abitrary object describing the errors, as passed by the service.
• data <object> - Any data that was provided with the request
• classname <string> - CSS classname of the error , if it applicable.

hasData <boolean> - True if the normalized data is not null, empty array, or empty object

fetching <boolean> - True if there is currently a request in-flight

app <object> - Direct access to the feathers app, should you need it

service <object> - Direct access to the service, should you need it

Child Methods

gotoNextPage() <function> - Run the query for the next page. Ignored if we are on the last page.

gotoPrevPage() <function> - Run the query for the prev page. Ignored if we are on the first page.

gotoFirstPage() <function> - Run the query for the first page;

gotoLastPage() <function> - Run the query for the last page;

<FeathersGet>

Fetches a single object by its id

<FeathersApp host={"localhost"} port={3030}>
  <FeathersGet service="my-service" id={itemId} render={MyDataViewCompoonent} />
</FeathersApp>

Input Props

service <string> - Name of the sevice to run the query on

id <string> - Id of the resource to request

render <funciton | component> - The component or function to render. It will be passed the below props.

Passed Props

app <object> - Direct access to the feathers app, should you need it

data <object> - The data returned from the query.

• Null if the query has not been returned or has no data.
• Contains the data returned from the query.
• If a transform function was passed to the parent component, the data will have been processed by the transformation function.

error <object> - Error object, if holding any error producted by the most recent request. Will be null if no error was reported.

• name <string> - Name of the error
• message <string> - The error message.
• code <number> - Error code
• errors <object> - An abitrary object describing the errors, as passed by the service.
• data <object> - Any data that was provided with the request
• classname <string> - CSS classname of the error , if it applicable.

fetching <boolean> - True if there is currently a request in-flight

hasData <boolean> - True if the normalized data is not null, empty array, or empty object

service <object> - Direct access to the service the query was run on.

transform <function> - Transformation function to run on data before it's passed down.

<FeathersService>

<Service service={"service-name"}>
  <ChildComponent />
</Service>

Input Props

service <string> - Name of the service

render <funciton | component> - The component or function to render. It will be passed the below props.

Passed Props

app <object> - Direct access to the feathers app, should you need it

service <object> - Direct access to the service, should you need it

Passed methods

create(data) - Create a new item on the service

update(id, data, <params>) - Replace the entire document(s) with the given id or query within the params object.

• Use null for id to update multiple items using a query.
• Passing null to id without specifying a query will result in an error

patch(id, data, <params>) - Patch an existing object * use null for id to update multiple items using a query object in the params object.

remove(id, <params>) - Remove the entire document(s) with the given id or query in the params object. _ Use null for id to update multiple items using a query. _ Passing null to id without specifying a query will result in an error

removeAll() - Remove all entries

Constants

ASC = 1 - Use with sort prop <FeathersQuery> to sort items in ascending order

DESC = -1 - Use with sort prop <FeathersQuery> to sort items in descending order

TBD

• Make change detection more efficient.
• Make sure change detection covers a reasonable range of use-cases
• Testing
• Configure webpack/babel, etc