@app-elements/list-resource

3.0.20 • Public • Published

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?

Package Sidebar

Install

npm i @app-elements/list-resource

Weekly Downloads

6

Version

3.0.20

License

ISC

Unpacked Size

4.67 kB

Total Files

3

Last publish

Collaborators

  • coryschadt
  • trustfall
  • adriaanwm
  • staydecent