React-safe-pic NPM

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?

Customize your picture?

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