react-boosted-image
react-boosted-image
npm i react-boosted-image
react-boosted-image

react-boosted-image

Smarter image component that has a blurred preview and a possibility to use WebP image type. It can also adjust to a device width. Feel free to check it out!

by by-all-means

1.0.3 (see all)License:MITTypeScript:Not Found
npm i react-boosted-image
Readme

React boosted image 💪 🌄

Smarter image component that has a blurred preview and a possibility to use WebP image type. It can also adjust to a device width. Feel free to check it out!

NPM JavaScript Style Guide

style: styled-components

Features

  • Blurred preview image [optional]
  • Provide a default preview image
  • Lazy load mode [optional]
  • WebP format support [optional]
  • Fallback for your "favourite" Safari 💩
  • Custom breakpoints (media-query widths) [optional]
  • Different images for each device [optional]

Possible enhancements

  • Custom animation effect / css
  • Add video support
  • ...

Install

npm install --save react-boosted-image

Usage

import * as React from 'react'

import { BoostedImage } from 'react-boosted-image'

class Example extends React.Component {
  render () {
    return (
      <BoostedImage
        alt={"example"}
        sources={{
          breakpoints: [900],
          webpSrcSet: [
            "/assets/your-image-for-width-less-than-900.webp",
            "/assets/your-image-for-width-more-than-900.webp"
          ],
          fallbackSrcSet: [
            "/assets/your-image-for-width-less-than-900.jpg",
            "/assets/your-image-for-width-more-than-900.jpg"
          ]
        }}
        width="640"
        height="540"
        lazyMode={true}
      />
    )
  }
}

Authors

License

MIT