react-fade-image

Fade or lazy image for react.

installation

npm install -S @feizheng/react-fade-image

properties

| Name | Type | Required | Default | Description | | --------- | ------ | -------- | ------- | ------------------------------------- | | className | string | false | - | The extended className for component. | | lazy | bool | false | false | If set lazy load mode. | | once | bool | false | false | Lazy only once. | | onChange | func | false | noop | The change handler. |

usage

1. import css

@import "~@feizheng/react-fade-image/dist/style.scss";

// customize your styles:
$react-fade-image-options: ()

2. import js

import ReactDemokit from '@feizheng/react-demokit';
import React from 'react';
import ReactDOM from 'react-dom';
import ReactFadeImage from '@feizheng/react-fade-image';
import './assets/style.scss';

class App extends React.Component {
  state = {
    lazyValue: true
  };

  handleClick = () => {
    this.setState({ lazyValue: false });
  };

  render() {
    const { lazyValue } = this.state;
    return (
      <ReactDemokit
        className="p-3 app-container"
        url="https://github.com/afeiship/react-fade-image">
        <button className="button" onClick={this.handleClick}>
          Trigger Load Image
        </button>
        <div className="list">
          <p>
            <ReactFadeImage src="https://imglf4.nosdn.127.net/img/KzNuMlRKSFVENitYYjJBYnU5Q2cwQjRjd0ljSURUWmxZeGxvWVlOYnhHZWRReFBoUVJWUXFRPT0.jpg?imageView&thumbnail=1680x0&quality=96&stripmeta=0&type=jpg" />
          </p>
          <p>
            <ReactFadeImage
              lazy={lazyValue}
              src="https://imglf6.nosdn.127.net/img/ZWl4dnBUa0VLMzhXRThRbnV3UWlQelY1dGNPeUdQMUhib2IwOEVvTEhvUTRISnUwNmkwekV3PT0.jpg?imageView&thumbnail=3000y2000&type=jpg&quality=96&stripmeta=0&type=jpg%7Cwatermark&type=2&text=wqkgeHVlc2h1wrdBcnRvbW8gLyA3NzQzNzQ2NTUubG9mdGVyLmNvbQ==&font=bXN5aA==&gravity=southwest&dissolve=30&fontsize=680&dx=32&dy=36&stripmeta=0"
            />
          </p>
          <p>
            <ReactFadeImage
              lazy={lazyValue}
              src="http://imglf5.nosdn.127.net/img/K0FrVGtpUSszZU1kODV6SzZUSFZaNFhGaEliU29uSmJzL3lXdUpoK3ZLdjMyNWp1OWJTRnB3PT0.jpg?imageView&thumbnail=3000y1687&type=jpg&quality=96&stripmeta=0&type=jpg"
            />
          </p>
        </div>
      </ReactDemokit>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

documentation

• https://afeiship.github.io/react-fade-image/

resources

• https://github.com/aFarkas/lazysizes

license

Code released under the MIT license.