https://github.com/saltas888/react-yall

Lazy load images/videos/iframes A react wrapper for yall.js using React Context.
https://github.com/saltas888/react-yall

lazy-load lazy-loading lazyload lazyload-images react react-lazy react-lazy-load

Last synced: about 1 month ago
JSON representation

Lazy load images/videos/iframes A react wrapper for yall.js using React Context.

• Host: GitHub
• URL: https://github.com/saltas888/react-yall
• Owner: saltas888
• License: mit
• Created: 2019-02-24T17:08:54.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-09T13:50:37.000Z (about 2 years ago)
• Last Synced: 2024-04-23T18:15:24.096Z (8 months ago)
• Topics: lazy-load, lazy-loading, lazyload, lazyload-images, react, react-lazy, react-lazy-load
• Language: JavaScript
• Homepage: https://saltas888.github.io/react-yall/
• Size: 3.1 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 24
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React Yall

[![Download Count](http://img.shields.io/npm/dm/react-yall.svg?style=flat-square)](https://npmjs.org/package/react-yall)

[![npm version](https://badge.fury.io/js/react-yall.svg)](https://badge.fury.io/js/react-yall)

-------------

Lazy load images/videos/iframes

A react wrapper for [yall.js](https://github.com/malchata/yall.js) using React Context.

:star2: Using ONLY react props and not DOM

-------------

# [DEMO](https://saltas888.github.io/react-yall/)

:exclamation: Works only with react >= 16.8.0.(The one with hooks)

## Installation

Run the following command:

`npm install -S react-yall`

## Usage

### Provider options:

| prop | default | type | description |

| ---- | ---- | ----| ---- |

| lazyClass | 'lazy' | string | The element class used by yall.js to find elements to lazy load. Change this is if a class attribute value of lazy conflicts with your application.|

| lazyBackgroundClass | 'lazy-bg' | string | The element class used by yall.js to find elements to lazy load CSS background images for. Change this if you'd prefer not to use the default. |

| lazyBackgroundLoaded | 'lazy-bg-loaded' | string | When yall.js finds elements using the class specified by lazyBackgroundClass, it will remove that class and put this one in its place. This will be the class you use in your CSS to bring in your background image when the affected element is scrolled into the viewport. |

| idlyLoad | false | boolean | requires idleLoadTimeout to be set |

| idleLoadTimeout | 100 | number | In environments where requestIdleCallback is available, this option sets a deadline in milliseconds to kick off lazy loading for elements. If this is set to 0, requestIdleCallback is never called, and lazy loading for elements will begin immediately once they're in the viewport.|

| threshold | 200 | number | The threshold (in pixels) for how far elements need to be within the viewport to begin lazy loading. |

for more https://github.com/malchata/yall.js/#api-options

### YallImg props:

| prop | default | type | description |

| ---- | ---- | ----| ---- |

| dataSrc | none | string | Actual src of image |

| src | none | string | Placeholder until image is reached |

  

### Simple usage:

```js

  import { Provider as YallProvider, YallImg } from 'react-yall';

  const options = {

    lazyClass: "lazy",

    lazyBackgroundClass: "lazy-bg",

    lazyBackgroundLoaded: "lazy-bg-loaded",

    idlyLoad: false,

    idleLoadTimeout: 100,

    threshold: 200,

  };

  ...

  return (

    

      ...

      

      ...

    

```

See also src/index.js for example

* Note: Tested only for image,picture,video tags