react-skela

react-skela

React skeleton library

Features

• Fully Customizable components: Feel free to change the colors, sizes, animation type.
• Plug and play: Use existing components or create a new one using basic react-skela (line, circle, square)
• ⚛️ Lightweight library with zero dependencies.

Demo

React Skela examples

Getting Started

npm i react-skela

yarn add react-skela

Usage

Base skeletons

• Default is a line skeleton

import Skela from 'react-skela'

const isLoading = () => <Skela />

• circle

import Skela from 'react-skela'

const isLoading = () => <Skela type="circle" />

• square

import Skela from 'react-skela'

const isLoading = () => <Skela type="square" />

Inbuilt skeletons

• Table

import { SkelaTable } from 'react-skela'

const isLoading = () => <SkelaTable rows={10} />

• Card

import { SkelaCard } from 'react-skela'

const isLoading = () => <SkelaCard cardWidth="200px" cardHeight="300px" />