react-skeletor's Introduction

React Skeletor

Display a skeleton preview of the application's content before the data get loaded.

Inject dummy data into the provider
Define your loading status with the provider
Wrap leaf component with createSkeletorElement and define the style of the component when it is pending. The component will do all the magic for you, it will turn on / off the pending design for you.

Demo

Documentation

Basic usage

Install via npm

npm install @trainline/react-skeletor

Wrap the component (often a container) with the createSkeletonProvider high order component. This adds the loading status and style into the context and inject fake data in the components subtree.

// UserDetailPage.jsx

import { createSkeletonProvider } from '@trainline/react-skeletor';

const UserDetailPage = ({ user }) => (
  <div>
    ...
    <NameCard user={user} />
    ...
  </div>
)

export default createSkeletonProvider(
  // Dummy data with a similar shape to the component's data
  {
    user: {
      firstName: '_____',
      lastName: '________'
    }
  },
  // Predicate that returns true if component is in a loading state
  ({ user }) => user === undefined,
  // Define the placeholder styling for the children elements,
  () => ({
    color: 'grey',
    backgroundColor: 'grey'
  })
)(UserDetailPage);

Use a skeleton element to toggle between the placehoder design and the real content depending on the loading status in the context.

// NameCard.jsx

import { createSkeletonElement } from '@trainline/react-skeletor';

const H1 = createSkeletonElement('h1');
const H2 = createSkeletonElement('h2');

const NameCard = ({ firstName, lastName }) => (
  <div>
    <H1 style={style}>{ firstName }</H1>
    <H2 style={style}>{ lastName }</H2>
  </div>
)

export default NameCard;