npm

Need private packages and team management tools?Check out npm Orgs. »

react-image-webp

0.6.0 • Public • Published

React image webp

npm

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 2019, global WebP Support from browsers is 79.52% – caniuse.com

Features

  • Small component for React.js (3.55 KB)
  • Small function (167 B)

Installation

For npm

npm install react-image-webp --save-dev

For yarn

yarn add react-image-webp

Guide

Import component in file

import Image from 'react-image-webp';

or you can import just small function (167 B)

import {isWebpSupported} from 'react-image-webp/dist/utils';

And start use:

<Image
     src={require('./path/to/image')}
     webp={require('./path/to/webp')}
 />

or

{isWebpSupported() ? <img src={require('./path/to/img.webp')} /> : <img src={require('./path/to/img.png')} /> }

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

install

npm i react-image-webp

Downloadsweekly downloads

2,676

version

0.6.0

license

none

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability