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

Lakkanna/react-skeleton