0.0.10 • Published 2 years ago

react-skeleton-image v0.0.10

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

React Skeleton Image

A skeleton image component which handles an image's loading and error states.

This is a simple React image component which abstracts away all the dirty work you have to do to handle loading and error states of images.

Installation

npm i react-skeleton-image

or

yarn add react-skeleton-image

or

pnpm add react-skeleton-image

Usage

After installing the package, import Image component:

import { Image } from 'react-skeleton-image'

You need to specify both width and height for the proper image sizing.

<Image src='https://rb.gy/fgpqyt' width={300} height={200} />

You can also specify the width and height in a container and wrap the Image component with it.

<div style={{ width: 300, height: 200 }}>
  <Image src='https://rb.gy/fgpqyt' />
</div>

It is recommended to set css properties like margin, padding and border-radius in the container instead of the Image component.

<div style={{ width: 300, height: 200, margin: 30 }}>
  <Image src='https://rb.gy/fgpqyt' />
</div>

Props

NameTypeDescription
widthnumberThe width of the image in px.
heightnumberThe height of the image in px.
skeletonbooleanShow skeleton loading. Default: true.
skeletonClassNamestringThe custom CSS class for skeleton loading.
inlinebooleanSet Image's display property to inline-block. Default: false.
0.0.10

2 years ago

0.0.9

2 years ago

0.0.8

2 years ago

0.0.7

2 years ago

0.0.6

2 years ago

0.0.5

2 years ago

0.0.4

2 years ago

0.0.3

2 years ago

0.0.2

2 years ago

0.0.1

2 years ago