This is a
playground to test code. It runs a full
Node.js environment and already has all of
npm’s 400,000 packages pre-installed, including
@cloudpower97/react-progressive-picture with all
npm packages installed. Try it out:
This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.
Table of Contents
React Progressive Picture is the right way to handle the lazy loading of your
picture element inside a
It's highly customizable, support different placeholder based on sources, advanced CSS
filter effects and a lot more to make your design just the way you want it!
npm i @cloudpower97/react-progressive-picture
yarn add @cloudpower97/react-progressive-picture
There are already some component out there that you can use to lazyload images OR to support the latest
react-progressive-image-loading doesn't allow you to use the
<picture> element and
react-responsive-picture hasn't any option for lazy loading.
I was seeking the best of both world, so I started the development of React Progressive Picture.
Here are some key feature of React Progressive Picture:
react-intersection-observerbehind the scenes, which is another high quality component which has 100% of test coverage as well
filterand apply them to create you unique loading effects.
timing functionand the
transition timeto achieve exactly what you have in mind.
You can find more example in the
|sources||array||false||-||The array of source objects specifies multiple media resources for the|
|placeholder||string||false||-||Placeholder image to show until the src loads|
|src||number||true||-||The image URL|
|alt||string||true||''||Defines an alternative text description of the image.|
|sizes||string||false||-||Sizes attribute to be used with src for determing best image for user's viewport.|
|transitionTime||number||true||750||Time in millisecond to transition the effects|
|timingFunction||string||true||'ease'||Timing function to use for the effects|
|blur||number||false||10||Initial value for the blur filter|
|grayscale||number||false||0||Initial value for the grayscale filter|
|opacity||number||false||1||Initial value for the opacity filter|
|filter||string||false||-||The filter CSS property to applies graphical effects. Read more here: https://developer.mozilla.org/en-US/docs/Web/CSS/filter|
|delay||number||false||0||Time in milliseconds before src image is loaded|
|options||object||false||-||react-intersection-observer options: https://github.com/researchgate/react-intersection-observer#options|
Pull requests and reporting an issue are always welcome :D
Fork and clone the repo:
git clone firstname.lastname@example.org:your-username/react-progressive-picture.git
Create a branch for the feature/fix:
git checkout -b feat:new-great-idea
npm run dev
to automatically spin up a webpack dev server and see your changes as you make them in the
Once you are done, push to your fork and submit a pull request.
To enforce a consistent style across the entire project we are using
We are also using
ESLint to catch bugs and syntax errors during development.
ESLint before each commit thanks to
Husky, so that you can focus on what matter the most : writing code.
Please, note that you will not be able to commit/push any changes you made if your code doesn't pass any of the linting stage described above.
In that case check your
git-log and fix any problem reported there.
Also note that by default
ESLint will try to fix any problems it can fix by itself.
It will bother you only for changes it can't fix.
All of the above assure us that our code base is always consistent with the rules we are using and bug free as much as possible.
We also utilizes
cypress to handle some edge cases which are hard to test otherwise.
We follow the Angular Commit Guidelines.
Refer to their documentation for more information.
Note: If you DON'T follow the Angular Commit Guidelines you will not be able to commit your changes.
Intersection Observer is the API used to determine if an element is inside the viewport or not.
yarn add intersection-observer picturefill
Then import it in your app:
import 'intersection-observer' import 'picturefill'