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

1. Default is a line skeleton

import Skela from 'react-skela'

const isLoading = () => <Skela />

1. circle

import Skela from 'react-skela'

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

1. square

import Skela from 'react-skela'

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

Inbuilt skeletons

1. Table

import { SkelaTable } from 'react-skela'

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

1. Card

import { SkelaCard } from 'react-skela'

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