michaeljonathanblack / react-phazy

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

react-phazy

A progressive, lazy-loading image-loader for React, with the canvas Blur effect popularized by Medium

It's a bunch of totally competent libraries plainly stitched together because I've read a handful of articles on how to build what Medium built, but no one had the common decency to publish an npm package.

This project's examples were bootstrapped with Create React App.

Installation

npm install react-phazy --save

Usage

Provide a high resolution source image, its width and height, and a very small preview image and you're off to the races. The alt text is also required because we're not monsters.

<Phazy
  source={source}
  preview={preview}
  alt={alt}
  width={width}
  height={height}
/>

Required styles are available in App.css under .phazy

Demo

yarn
yarn start

About


Languages

Language:JavaScript 81.7%Language:HTML 9.8%Language:CSS 8.5%