React Skeleton - display component loading states.
npm install react-skeletonEasy to use, composable skeleton loader components for your UI component loading states.
``sh`
npm install react-skeleton
or
yarn add react-skeleton
The easiest way to use this component is by importing and adding it to your component.
`js
import Skeleton from "react-skeleton";
const ComponentAwaitingData = ({ body, title }) => {
return (
<>
{body ||
export default ComponentAwaitingData;
`
> NOTA BENE: This section is WIP
In short when you wrap in 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:
There are two ways to add theme to your skeleton.
1. Wrapping your app with the theme provider.
`jsx`
const App = () => (
{children}
)
2. Creating your own . If you choose this option you don't need the Provider wrapper.
`jsx
// YouSkeletonComponent.js
const YouSkeletonComponent = () => (
)
`
@TODO:
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. 🙏
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"`