Lightweight data view abstraction for managing fetching/loaded/errored states for remote data
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

shasta-data-view NPM version Downloads Build Status

Simple component for managing asynchronous data dependency states. If you have a view with 3 base states: fetching, loaded, and errored - this will help you clean up a lot of boilerplate. Works out of the box with tahoe for doing API stuff.

This is a work in progress - There is sparse documentation, no tests, and it's not on npm. Use at your own risk while we finish up!


npm install shasta-data-view --save


You can define three functions:

  • resolveData
    • Defaults to doing nothing
    • Triggered on mount/update when any storeProps (what you give to shasta's connect function) are not fulfilled
    • Responsible for dispatching any actions to fetch data
  • renderData
    • Defaults to displaying nothing
    • Triggered when all storeProps are resolved
    • Receives a data object as an argument
    • Responsible for rendering the data
  • renderLoader
    • Defaults to displaying nothing
    • Triggered when all storeProps are not resolved
    • Responsible for rendering a loader
  • renderErrors
    • Defaults to displaying nothing
    • Triggered when any storeProp value has an error attribute
    • Receives an errors Map as an argument
      • Key is the storeProp
      • Value is the error object
    • Responsible for rendering any errors that happened while fetching data


import React from 'react'
import { PropTypes, connect } from 'shasta'
import actions from 'core/actions'
import DataComponent from 'shasta-data-view'

@connect({ users: 'api.subsets.users' })
class UserList extends DataComponent {
  static displayName = 'UserList';
  static propTypes = {
    users: PropTypes.iterable

  resolveData () {
    actions.api.users.find({ subset: 'users' })

  renderData ({ users }) {
    return (<div>
      <h1>{users.size} Users</h1>
      { =>
          <li key={user.get('id')}>{user.get('name')}</li>
  renderLoader () {
    return <h1>Loading...</h1>
  renderErrors (errors) {
    return (<ul>
      {, field) =>
          <li key={field}>{field}: {err.message}</li>