Skip to content

jariz-forks/react-skeletor

 
 

Repository files navigation

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.

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

Packages

No packages published

Languages

  • TypeScript 98.7%
  • JavaScript 1.3%