npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-lazy-blur-images

v0.1.1

Published

Lazy Blur Images is a light component that allows developers to implement an async image charge in their websites when they are in the visible area of the user

Downloads

2

Readme

React Lazy Blur Images

Lazy Blur Images is a light component that allows developers to implement an async image charge in their websites when they are in the visible area of the user

Blur Image

You can view a example of this library from here

How Works

Lazy Blur Images works with base64 images to show a light preview while the real image is downloaded in the background, the image will be downloaded after the "load" event if it is in the visible area, by default the Intersection Observer API is used to detect if the image is in the visible area

Placeholder Studio

You can get and manipulate a placeholder from the official (and free) Placeholder Studio for this package

Placeholder Studio

How to implement

We need to get our base64 small image from Placeholder Studio

<LazyBlurImage
  src="https://concepto.de/wp-content/uploads/2015/03/paisaje-e1549600034372.jpg"
  placeholder="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAADCAIAAADUVFKvAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAO0lEQVQImQEwAM//AHmap2iet1OeyIi2ysLS0QCKj4xsiIxujISipHLCsG4AbHN5VWNsXmRwWl9nYmZkbxkX08bVaG0AAAAASUVORK5CYII="
  alt="Some alt text"
  width={800}
  height={409}
  radio={1}
  scale={1.5}
  onComplete={() => {})}
  onError={() => {}}
/>

| property | description | default | | ----------- | ---------------------------------------------------------- | -------- | | src | Image url | Manually | | placeholder | Base64 Placeholder generated by the placeholder studio | Manually | | alt | Alternative text | Manually | | width | Image width | Manually | | height | Image Height | Manually | | scale | Custom css transform: scale() used to show the placeholder | 1.5 | | radio | Custom css filter: blur() radio in pixels | 20 | | onComplete | Callback called when the image is downloaded | Manually | | onError | Callback called when the image can't be downloaded | Manually |