How to use the react-lazyload.default function in react-lazyload

To help you get started, we’ve selected a few react-lazyload examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github steamgriddb / steamgriddb-manager / src / js / Components / gridImage.jsx View on Github external
import React from 'react';
import ProgressBar from 'react-uwp/ProgressBar';
import { CSSTransitionGroup } from 'react-transition-group';
import PropTypes from 'prop-types';

const ReactLazyLoad = require('react-lazyload').default;

class GridImage extends React.Component {
  constructor(props) {
    super(props);

    const { zoom, onGridClick } = this.props;

    this.gridWidth = 300 * zoom;
    this.gridHeight = 140 * zoom;
    this.onGridClick = onGridClick;
    this.handleClick = this.handleClick.bind(this);
  }

  shouldComponentUpdate(nextProps) {
    const { progress } = this.props;
    return !(progress === nextProps.progress);
github myxvisual / react-uwp / src / Image / index.tsx View on Github external
import * as React from "react";
import * as PropTypes from "prop-types";

const ReactLazyLoad = require("react-lazyload").default;

import Icon from "../Icon";

export interface DataProps {
  /**
   * Toggle LazyLoad mode open, powerful base on [react-lazyload](https://github.com/jasonslyvia/react-lazyload).
   */
  useLazyLoad?: boolean;
  /**
   * Use Div backgroundImage.
   */
  useDivContainer?: boolean;
  /**
   * Once the lazy loaded component is loaded, do not detect scroll/resize event anymore. Useful for images or simple components.
   */
  once?: boolean;
github Asing1001 / movieRater.React / dist / app / components / movieCard.js View on Github external
render() {
        const { roomTypes, movie, timesStrings } = this.props;
        return (React.createElement("article", { className: "card", style: { display: 'flex' } },
            React.createElement(react_router_dom_1.Link, { to: `/movie/${movie.yahooId}` },
                React.createElement(react_lazyload_1.default, null,
                    React.createElement("img", { className: "poster", src: this.getSmallPosterSrc(movie), alt: "Image not found" }))),
            React.createElement("div", { className: "col-xs-12" },
                React.createElement("header", { style: { paddingTop: '.5em' } },
                    React.createElement(react_router_dom_1.Link, { style: { color: 'inherit' }, to: `/movie/${movie.yahooId}` },
                        React.createElement("h3", { className: "title" },
                            movie.chineseTitle,
                            roomTypes && roomTypes.length > 0 && React.createElement("span", { style: { marginLeft: '.2em' } }, roomTypes.map((roomType, index) => roomType)))),
                    React.createElement(react_router_dom_1.Link, { style: { color: 'inherit' }, to: `/movie/${movie.yahooId}` },
                        React.createElement("small", null, movie.englishTitle))),
                React.createElement("div", { className: "resultInfo" },
                    React.createElement(react_router_dom_1.Link, { style: { color: 'inherit' }, to: `/movie/${movie.yahooId}` },
                        React.createElement("div", null,
                            "\u4E0A\u6620\u65E5\u671F\uFF1A",
                            movie.releaseDate || '未提供'),
                        React.createElement("div", { className: "hidden-xs" },
                            "\u985E\u578B\uFF1A",

react-lazyload

Lazyload your components, images or anything where performance matters.

MIT
Latest version published 4 months ago

Package Health Score

83 / 100
Full package analysis