README

react-safe-pic

A react library for image compatibillity and a definitive solution to google's "Serve images in next-gen formats" warning, don't use img tag no more, try react-safe-pic!

Install

npm install react-safe-pic

yarn add react-safe-pic

Usage

import React from 'react'
import { SafePic } from 'react-safe-pic'

const App = () => {
  return (
    <SafePic
      regularImage={'your-jpg-png-image'}
      webpImage={'your-webp-image'}
    />
  )
}

How it works and when to use it?

React-safe-pic main job is to keep image compatibility in all browsers.

Also react-safe-pic it has 2 fallbacks to keep it safe and easy. If .WEBP fails it will load the JPG/PNG/SVG image, and if JPG/PNG/SVG image fails as well you can handle the error and showing a default error image! :D

Customize your picture?

You can blur you image, rounded it, put it a mask (even a gradient one) and handle opacity. More feature will be added, stay in tune!

Props

Prop	Description
regularImage	type: string. here goes the JPG/PNG/SVG image
webpImage	type:string. hero goes the .WEBP images
filterColor (optional)	type: string. change the color of the filter
filterOpacity (optional)	type: number. Set the opacity of the filter mask
blur: (optional)	type: string. blur the image
errorImage (optional)	type: string. here goes the error image you want to show
alt (optional)	type: string. The alt attribute of the images
errorImageAlt (optional)	type: string. The alt attribute of the error image
borderRadius (optional)	type: string. Put border radius to the image

License and contact

All feedback is appreciated sooo much and also suggestion about new features are most than welcome!

contact: cristiansagula@gmail.com

Usage no npm install needed!