Live demo on Stackblitz.
React Loading Skeleton is a library for creating beautiful, animated loading skeletons that automatically adapt to your app's design. This README provides basic usage, principles, and props reference for the library.
To use React Loading Skeleton in your React project, follow these steps:
-
Install the library using npm or yarn:
npm install react-loading-skeleton-menu
or
yarn add react-loading-skeleton-menu
-
Import the Skeleton component and use it in your components:
import Skeleton from 'react-loading-skeleton-menu'; const MyComponent = () => { return ( <div> <Skeleton height={100} width={200} /> </div> ); };
React Loading Skeleton follows these principles:
- Customizable: You can customize the appearance and behavior of the loading skeletons using props.
- Adaptable: Skeletons automatically adjust to fit the size and layout of your app.
- Accessible: The library ensures accessibility best practices are followed, making loading states usable for all users.
height
: The height of the skeleton element.width
: The width of the skeleton element.loading
: Boolean flag to indicate whether the skeleton should be displayed as loading or not.
If the skeleton width is 0 when the parent container has display: flex
, you can fix it by applying flex: 1
to the skeleton container via the containerClassName
prop.
<div style={{ display: 'flex' }}>
<Skeleton containerClassName="flex-1" />
</div>
If the height of your container is off by a few pixels, ensure that the line-height
of the container is set to 1.
<div style={{ lineHeight: 1 }}>
<Skeleton height={30} />
</div>
Here's an example of using React Loading Skeleton in a React component:
import React from 'react';
import Skeleton from 'react-loading-skeleton';
const MyComponent = ({ loading }) => {
return (
<div>
{loading ? (
<Skeleton height={100} width={200} />
) : (
<div>Your content here</div>
)}
</div>
);
};
export default MyComponent;