The react-shimmer's intro from gomorizsolt

gomorizsolt / react-shimmer Goto Github PK

View Code? Open in Web Editor NEW

🌠 Async loading, performant Image component for React.js

License: MIT License

HTML 4.61% JavaScript 11.02% CSS 11.03% TypeScript 73.35%

react-shimmer's Introduction

A powerful, customisable, Suspense-like <img> component that (optionally) simulates a shimmer effect while loading. (with zero dependencies!).

Live Demo

Install

npm i react-shimmer

yarn add react-shimmer

Usage

import React from 'react'
import Image, { Shimmer } from 'react-shimmer'

function App() {
  return (
    <div>
      <Image
        src='https://source.unsplash.com/random/800x600'
        fallback={<Shimmer width={800} height={600} />}
      />
    </div>
  )
}

or you can use your custom React component as a fallback:

import React from 'react'
import Image from 'react-shimmer'

import Spinner from './Spinner'

function App(props) {
  return (
    <div>
      <Image
        src="https://example.com/test.jpg"
        fallback={<Spinner />}
      />
    </div>
  )
}

Properties

Property	Type	Required	Default value	Description
`src`	string	yes
`fallback`	ReactNode	yes
`errorFallback`	func	no
`onLoad`	func	no
`delay`	number	no		Delay in milliseconds before showing the `fallback`
`fadeIn`	bool	no	false	Use built-in fade animation on img
`NativeImgProps`	React.ImgHTMLAttributes	no