Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
react-lazy-blur-image
Advanced tools
Readme
Load low resolution / placeholder image first and then load the actual image lazily when it's in the viewport.
Example with 1000 images
The component starts by displaying a lightweight gray placeholder (base64 encoded).
When the component is about to reach the viewport, the gray placeholder is replaced with the actual placeholder you provided (Can be any image. Either local placeholder or remote low resolution image) and at the same time the actual image is loaded lazily and replaces the placeholder when it's fully loaded.
This gives us an absolute perfect user experience / performance balance.
The package is available on npm.
npm i -s react-lazy-blur-image
yarn add react-lazy-blur-image
This component expects exactly one child which has to be a function. You get the src
and the style
to apply (for blur effect)
import React from 'react';
import LazyImage from 'react-lazy-blur-image';
const App = () => {
return (
<LazyImage
placeholder={'http://example.com/placeholder.png'}
uri={'http://example.com/src.png'}
render={(src, style) => <img src={src} style={style} />}
/>
);
};
The child which is a function will have access to src
and style
(for blur effect) values as arguments.
Render prop | Description | Type | Value |
---|---|---|---|
src | The src of the image being rendered | String | Initially points to the placeholder image, then loads image and will then point to the source image |
style | Style props to apply to your rendered image (blur effect) | Object | Jsx style object |
You can use styled-components
, to transition an image from the placeholder when the image has loaded.
You can use the render props
as mentioned above and then use it to animate the opacity
of the image from 0.2
to 1
when the image is loaded. This is , of course, a basic example. But you can use this logic to create more powerful animations.
For eg :
import React, { Component } from 'react';
import styled from 'styled-components';
import LazyImage from 'react-lazy-blur-image';
const Image = styled.img`
height: 450px;
width: 800px;
margin-top: 200px;
display: block;
object-fit: cover;
`;
const Usage = () => {
return (
<LazyImage
uri={'/assets/imageURL'}
placeholder={'/assets/placeholderURL'}
render={(src, style) => <Image src={src} style={style} />}
/>
);
};
A good amount of code has been inspired from react-progressive-image, the additions being the usage of react-visibility-sensor to check if there is a need to load the image and making sure that the image doesn't load in advance when it's not really needed. It's also refactored to make use of the new React 16+ hook system.
FAQs
Load low resolution / placeholder image first and then load the actual image lazily when it's in the viewport.
The npm package react-lazy-blur-image receives a total of 277 weekly downloads. As such, react-lazy-blur-image popularity was classified as not popular.
We found that react-lazy-blur-image demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.