Novices Performing Miracles
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

react-dataloader

1.1.0 • Public • Published

react-dataloader

We built the data loading layer so you don't have to.

Why

The main purpose of this component library is to take care of data loading, store generation, and persistence so that you can focus on views instead of data fetching.

What's included:

  • ObjectLoader
  • Datasource
  • DependentDatasource
  • FilteredDatasource
  • Examples

Usage

// Somewhere
var exampleConfig = {
  name: "Parents",
  idAttribute: "id",
  basePath: "http://localhost:8083/api/",
  endpoint: "checklists",
  storeType: "shared"
};
 
// In your render function
<Datasource {...exampleConfig}>
  <SomeViewComponent>
</Datasource>
  • SomeViewComponent should expect to receive (array) collection, (object) actions, and any other props passed to Datasource

At Procore we use it in this way

<Datasource {...exampleConfig}>
  <Collection>
    <ChecklistCell onSelect={this.onSelect}/>
  </Collection>
</Datasource>
  • Collection can be thought of as a layout component, its inputs are an (array) collection, (object) actions, and a (ReactComponent) cell. It maps over collection and returns cells.
  • This approach allows us to quickly create customizable lists by simply swapping out the layout cell, and the endpoint we're hitting.

Keywords

none

install

npm i react-dataloader

Downloadsweekly downloads

10

version

1.1.0

license

ISC

last publish

collaborators

  • avatar