1.1.1 • Published 11 months ago
react-styled-loading-skeleton v1.1.1
react-styled-loading-skeleton
Animated loading skeleton on styled-components based for React.
Description
This package provides a stub component that can be used while the main content of the site is loading. The component can be modified for different types of content: round avatars, composition.
Features
- Suitable for React.
- Easy to integrate.
- Easy to modify.
- It can be used for any purpose where you need to show the process of loading content blocks.
Installation
Install the package via npm:
npm install --save react-styled-loading-skeleton
Demo
You can check storybook live demo
Use
Once installed, import the component and use it in your app:
import { Skeleton} from 'react-styled-loading-skeleton';
// ...
function App() {
// ...
return (
{ loading
? <Skeleton />
: <div>Your Content</div>
}
);
}If you need to change the visual representation of the Skeleton boot component, you can pass props for modification.
| Prop | Description | Default |
|---|---|---|
| width?: number | Width in pixels | undefined |
| widthPercentage?: number | Width as a percentage | 100% |
| height?: number | Height in pixels | font size |
| heightPercentage?: number | Height as a percentage | 100% |
| rounded?: number | Rounding borders in pixels (border-radius) | none |
| roundedPercentage?: number | Rounding borders as a percentage | none |
| isCircle?: boolean | Round to the shape of a circle | false |
| duration?: number | Animation duration (ms) | 1500 |
| timingFunc?: CSSProperties'animationTimingFunction' | Animation type | ease-in-out |
| baseColor?: string | Primary background color | #e9e9e9 |
| highlightColor?: string | Highlight color animation | #f9f9f9 |
| gradient?: string | Background gradient. background-image: linear-gradient() | 90deg, #e9e9e9, #f9f9f9, #e9e9e9 |
| count?: number | Number of skeletons per row | undefined |
| flex?: { direction?: CSSProperties'flexDirection'; gap?: CSSProperties'gap'; justifyContent?: CSSProperties'justifyContent'; alignItems?: CSSProperties'alignItems'; } | Align skeletons in a row column. Must be used in conjunction with count! | undefined |
| withoutAnimation?: boolean | Disable animation | false |
| style?: CSSProperties | Any css properties | undefined |
License
This project is distributed under the MIT license.