@app-elements/list-resource

ListResource

A Component that will request data from an endpoint and then render each item in response results array. This Component assumes the endpoint will point to a Django-Rest-Framework powered API using LimitOffsetPagination. Or, an API with similar JSON output.

Installation

npm install --save @app-elements/list-resource

Usage

import ListResource from '@app-elements/list-resource'

const UserItem = ({ id, name, email }) =>
  <div class='user-item'>
    <h2><a href={`/users/${id}`}>{name}</a></h2>
    <p>{email}</p>
  </div>

const Users = () =>
  <ListResource
    endpoint='https://jsonplaceholder.typicode.com/users'
    limit={10}
    render={UserItem}
  />

export default Users

There is also a named export for rendering a single resource rather than a list.

import { Resource } from '@app-elements/list-resource'

const UserDetails = ({ id, name, email }) =>
  <div>
    <h1>{name}</h1>
    <p>{email}</p>
    <p><a href='/users'>&larr; Back to all Users</a></p>
  </div>

// `id` is passed as a prop from Router, representing the page id we are on:
// `/users/:id`
const User = ({ id }) =>
  <div key={`user-${id}`}>
    <Resource
      endpoint={`https://jsonplaceholder.typicode.com/users/${id}`}
      render={UserDetails}
      id={id}
    />
    {parseInt(id, 10) < 10 &&
      <a href={`/users/${parseInt(id, 10) + 1}`}>Next</a>
    }
  </div>

export default User

Props

Prop	Type	Default	Description
endpoint	String	None	The url to call
limit	Number	None	A convenience prop for setting ?limit=${limit} on the endpoint url
render	Component	None	The Component to render for each item in the response results array
pagination	Boolean	false	Should ListResource also render a <Pagination /> component?