1.0.17 • Published 13 days ago

lesca-react-onload v1.0.17

Weekly downloads
-
License
MIT
Repository
github
Last release
13 days ago

React React React React React NPM React NPM

Why use it?

Progress and timing provided for loading and animation.

Live Demo

codesandbox.io

Installation

npm install lesca-react-onload --save

Usage

import OnloadProvider from 'lesca-react-onload';
export default function () {

  const onStep = (e) => {
    const {loaded, total} = e;
    const percent = loaded / total * 100;
    console.log(percent) // get loading percent
  }

  const onload = (e) => {
    // all image loaded
  }

  return (
    <OnloadProvider hideBeforeLoaded onStep={onStep} onload={onload}>
      <img src='./myImage.jpg'>
      <div style={{ backgroundImage: 'url(./myBackgroundImage.jpg)' }} />
    </OnloadProvider>
  );
};

Properties

Propertiesdescriptiondefault
hideBeforeLoaded:booleanhide DOM before loadedtrue
onStep:functioncall when each image loaded
onload:functioncall when all image loaded

args

argsdescription
loaded:numbertarget image loaded number
total:numbertarget image total number
index:numbertarget image load index
url:stringtarget url

Features

  • maintain if necessary
1.0.17

13 days ago

1.0.16

13 days ago

1.0.15

6 months ago

1.0.14

7 months ago

1.0.13

7 months ago

1.0.9

12 months ago

1.0.11

12 months ago

1.0.10

12 months ago

1.0.12

9 months ago

1.0.7

1 year ago

1.0.6

1 year ago

1.0.5

1 year ago

1.0.4

1 year ago

1.0.3

1 year ago

1.0.1

1 year ago

1.0.0

1 year ago

0.0.1

1 year ago