@trainline/react-skeletor

React Skeletor

Skeleton preview for React components

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

Documentation

Basic usage

1. Install via npm

npm install @trainline/react-skeletor

1. Wrap your component (often a container) with the createSkeletonProvider high order component. This adds the pending status and style into the context.

// UserDetailPage.js

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

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

export default createSkeletonProvider(
  // Dummy data with a similar shape to your component's data
  {
    firstName: '_____',
    lastName: '________'
  },
  // Predicate specifying whether or not your data is loaded
  ({ user }) => user === undefined
)(UserDetailPage);

1. Use a skeleton element to magically style your component when data is pending with zero effort!

// NameCard.js

import { h1 as SkeletonH1, h2 as SkeletonH2 } from '@trainline/react-skeletor';

const NameCard = ({ firstName, lastName }) => (
  <div>
    <SkeletonH1 style={style}>{ firstName }</SkeletonH1>
    <SkeletonH2 style={style}>{ lastName }</SkeletonH2>
  </div>
)

export default NameCard;

Contribute

Before opening any Pull Request please post an issue explaining the problem so that the team can evaluate if the Pull Request is relevant.