react-image-webp
v0.8.0
React component for check browser support format webp and insert if supported webp image.
0/weekUpdated 3 years agoUnpacked: 3.7 MB
Published by donrai
npm install react-image-webpReact image webp
[![npm][npm]][npm-url]
HTML Picture instead of this library
I highly recommend using HTML
Example for native HTML
``
js
`
Links:
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
- https://css-tricks.com/using-webp-images/#article-header-id-3
Description
React component for check browser support format WebP and insert if supported WebP image. More about WebP https://developers.google.com/speed/webp/As of October 2021, global WebP Support from browsers is 95.31% – caniuse.com
Features
- Small component for React.js (3.55 KB)
- Small function (167 B)Installation
NPM
npm install react-image-webp --save-dev
Yarn
yarn add react-image-webp
Guide
Import component in file
js
import Image from 'react-image-webp';
`
or you can import just small function (167 B)
js
import {isWebpSupported} from 'react-image-webp/dist/utils';
`And start use:
js
webp={require('./path/to/webp')}
/>
`
or
js
isWebpSupported()
? 
: 
``Props
| property | type | description |
| src | string | Path to fallback image if WebP doesn't browser support |
| webp | string | Path to WebP image |
| alt | string | Alternate text |
| title | string | Title text |
| style | object | Style for image |
| className | string | Class name for image |
[npm]: https://img.shields.io/npm/v/react-image-webp.svg
[npm-url]: https://www.npmjs.com/package/react-image-webp