# [React Skeleton](https://github.com/ijsto/react-skeleton)

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

# **Installation**

### **[npm package](https://www.npmjs.com/package/react-skeleton)**

```sh
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.

```js
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.
```jsx
const App = () => (
  <SkeletonThemeProvider theme={theme}>
    {children}
  </SkeletonThemeProvider>
)
```

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

```jsx
// 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)](https://github.com/benmosher/eslint-plugin-import/blob/v2.22.1/docs/rules/no-unresolved.md)**

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"`