@yisheng90/react-loading
v1.5.0TypeScript
A React Skeleton Component
0/weekUpdated 3 years agoMITUnpacked: 140.3 KB
Published by Yi Sheng Lee
npm install @yisheng90/react-loading!Skleton React Loading
!Publish NPM
Loading Skleton component building block to easily create placholder loadings.
$3
🎨 Customizable - You can change the color, size and shape of the skeleton
🎮 Plug and Play - You can just import the component and start using it
🏠 Building block - You can use it as a building block to build complex loading component
🧸 Easy to adapt - It is a react component.
$3
$3
Install via yarn or npm
``bash`
npm install @yisheng90/react-loading --save
or
`bash`
yarn add @yisheng90/react-loading
$3
There are two ways to use it.
1. Use it as a component
`jsx
import Skeleton from "@yisheng90/react-loading";
`
2. Use it as a building block
`jsx
import Skeleton from "@yisheng90/react-loading";
const CardSkleton = () => (
display: "flex",
flexDirection: "column",
justifyContent: "space-evenly",
width: "100%",
marginLeft: "20px",
}}
>
);
`
$3
Defaults to 1. It is used to determine the number of rows to be display.
_notes: This option will be ignored if
is set as true_
width?: number | stringDefaults to 100%. It is used to set the width of the skeleton. You can set it using
, rem or px.
height?: number | stringDefaults to 100%. It is used to set the height of the skeleton. You can set it using
, rem or px.
circle?: booleanDefaults to false. It is used to set shape of the skleton.
It is used to set the color of the skleton. You can set it using
, rgb or rgba.
translucent?: booleanDefaults to false. It is used to set the opacity of the skleton.
Defaults to 4px. It is used to determine the border radius of the rows. The unit is in
._notes: This option will be ignored if
circle is set as true_$3
#### Rows
`jsx
`#### Width
jsx
`#### Height
jsx
`$3
jsx
`$3
jsx
`$3
jsx
``Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.
$3
