React Skeleton

Easy to use, composable skeleton loader components for your UI component loading states.

Installation

npm package

npm install react-skeleton

or

yarn add react-skeleton

Usage

The easiest way to use this component is by importing <Skeleton /> and adding it to your component.

import Skeleton from "react-skeleton";

const ComponentAwaitingData = ({ body, title }) => {
  return (
    <>
      <h1>{title || <Skeleton />}</h1>
      <p>{body || <Skeleton count={3} />}</p>
    </>
  );
};

export default ComponentAwaitingData;

Theming

NOTA BENE: This section is WIP

In short when you wrap <Skeleton /> in <ThemeProvider theme={withYourTheme} /> it will apply styles to all children. Additionally, you can override individual elements by providing the specific styles via props. The available list of props are coming soon - feel free to create an issue if this is pressing for you. @TODO:

Adding theme

There are two ways to add theme to your skeleton.

1. Wrapping your app with the theme provider.

const App = () => (
  <SkeletonThemeProvider theme={theme}>
    {children}
  </SkeletonThemeProvider>
)

2. Creating your own <Skeleton />. If you choose this option you don't need the Provider wrapper.

// YouSkeletonComponent.js

const YouSkeletonComponent = () => (
  <ReactSkeleton theme={theme} />
)

API Reference

@TODO:

Known issues

Currently we have an issue with the import/no-unresolved eslint rule, which will depending on your eslint rules may show an error:

Casing of react-skeleton does not match the underlying filesystem. eslint(import/no-unresolved)

Please add an eslint ignore for this, until we resolve it. If you know what may be causing this, a PR would be much appreciated. 🙏

Version 1

Since the v1 was heavily outdated, unfortunately, we have decided to not invest in migration guide.

Instead, much work has been put in to ensure the API of V2+ is easy to understand and use. If you prefer stick to the old API, please install react-skeleton@">=1.0.0 <1.0.2"