https://github.com/trainline/react-skeletor

Skeleton loading for React
https://github.com/trainline/react-skeletor

hoc loading react skeleton

Last synced: 3 months ago
JSON representation

Skeleton loading for React

• Host: GitHub
• URL: https://github.com/trainline/react-skeletor
• Owner: trainline
• License: other
• Created: 2017-05-17T16:18:20.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2019-10-30T17:24:35.000Z (about 5 years ago)
• Last Synced: 2024-07-19T01:44:42.853Z (4 months ago)
• Topics: hoc, loading, react, skeleton
• Language: TypeScript
• Homepage: https://trainline.github.io/react-skeletor/
• Size: 1.53 MB
• Stars: 554
• Watchers: 15
• Forks: 27
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
[![npm](https://img.shields.io/npm/v/@trainline/react-skeletor.svg)](https://www.npmjs.com/package/@trainline/react-skeletor)

[![license](https://img.shields.io/github/license/trainline/react-skeletor.svg)](https://github.com/trainline/react-skeletor/blob/master/LICENSE.md)

[![Travis](https://img.shields.io/travis/trainline/react-skeletor.svg)]()

[![npm](https://img.shields.io/npm/dm/@trainline/react-skeletor.svg)](https://www.npmjs.com/package/@trainline/react-skeletor)

# React Skeletor

![React-skeletor gif](/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](https://trainline.github.io/react-skeletor)

## [Documentation](Documentation.md)

### Basic usage

1. Install via npm

```

npm install @trainline/react-skeletor

```

2. Wrap the component (often a container) with the `createSkeletonProvider` high order component. This adds the loading status and style into the [context](https://facebook.github.io/react/docs/context.html) and inject fake data in the components subtree.

```jsx

// UserDetailPage.jsx

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

const UserDetailPage = ({ user }) => (

  


    ...

    

    ...

  

)


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);

```

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

```jsx

// NameCard.jsx

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

const H1 = createSkeletonElement('h1');

const H2 = createSkeletonElement('h2');

const NameCard = ({ firstName, lastName }) => (

  


    
{ firstName }

    
{ lastName }

  

)


export default NameCard;

```

### Contribute

Before opening any Pull Request please [post an issue](https://github.com/trainline/react-skeletor/issues/new) explaining the problem so that the team can evaluate if the Pull Request is relevant.

[Learn more on medium](https://codeburst.io/achieve-skeleton-loading-with-react-a12404678030)