Skeleton loading for React
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
contributors Add contributor file Jun 22, 2017
demo
jest Update dependencies Oct 2, 2017
src
.gitignore Add project base Mar 23, 2017
.prettierrc Add prettier Oct 2, 2017
.travis.yml Add tests on travis Jun 22, 2017
CHANGELOG.md
Documentation.md Remove default created elements and improve types / doc Nov 1, 2017
LICENSE.md Add extension to license file Jun 22, 2017
NOTICE.txt Polish examples and readme Jun 16, 2017
PULL_REQUEST_TEMPLATE.md Polish examples and readme Jun 16, 2017
README.md
blog_posts.png Improve readme Jun 25, 2017
package.json 1.0.2 Nov 9, 2017
react-skeletor.gif Polish examples and readme Jun 16, 2017
test.config.json
tsconfig.json Improve examples May 26, 2017
tslint.json Add project base Mar 23, 2017

README.md

npm license Travis npm

React Skeletor

React-skeletor gif

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

  1. Install via npm
npm install @trainline/react-skeletor
  1. 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);
  1. 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;

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.

Learn more on medium