react-skeleton
We all know that without loader in React components, user interface will not complete. We usually show a spinner or a text informing that data is loading... better way to show a user that what our ui look like in a Skeleton of components. react-skeleton is usefull to show a loading in react components.
Examples
Using LinearGradientSkeleton
see code
Using Skeleton
see code
Installing
npm install @linja/react-skeleton --save
OR
yarn add @linja/react-skeleton --save
Usage
🔹 Normal Skeleton
import React from "react";
import { Skeleton } from "@linja/react-skeleton";
export const GoodLoader = () => {
return <Skeleton />;
};
Normal Skeleton Props
prop name | type | values | default value | description |
---|
rounded | boolean | true/false | false | show a circle instead of rectangle |
color | string | any color code/name | #DDDDDD | color for skeleton |
style | html style attributes | html style attributes | {} | addition style for elements |
🔹 Linear Gradient Skeleton
import React from "react";
import { LinearGradientSkeleton } from "@linja/react-skeleton";
export const GoodLoader = () => {
return <LinearGradientSkeleton />;
};
Linear Gradient Props
prop name | type | values | default value | description |
---|
gradientType | string | "dimigo", "skyline", "mango", "bluelagoo" | "dimigo" | themes of linear gradient |
gradientColors | string[] | any color combination ex: ["#ec008c", "#fc6767"] | | colors for linear gradient |
rounded | boolean | true/false | false | show a circle instead of rectangle |
style | html style attributes | html style attributes | {} | addition style for elements |
Examples code
Linear Gradient Skeleton Example
Normal Skeleton Example
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.
License
This project is licensed under the MIT License - see the LICENSE file for details