npm Price License: MIT GitHub package version
How to use:
- Prepare:
Install
webp-checkeras a regularnode_modulespackage via:
npm i web-checker
or yarn:
yarn add web-checker
Important! - you need to run webp-checker as soon as possible inside the very first component/module that has an interaction with the whole DOM. For example in create-react-app you probably should run the below script example in the componentDidMount() method of the root App.js component (or if you're using Redux state managment inside its initialState.js).
Quick Start:
- So, to understand if your browser has webP support or not, basically, you need just run
webpChecker. After function running you will get awindowvariable__WEBPSUPPORT__(e.g.window.__WEBPSUPPORT__) with boolean value that shows if the webp support istrue/false.
-- Example for React usage:
// ...some logic
import webpChecker from 'webp-checker' // import it;
class App extends React.Component {
// ...some logic
componentDidMount() {
webpChecker(); // run checker
window.__WEBSUPPORT__ // get notified about browser webp support by this global variable
}
// ...some logic
}
-- Example basic:
import webpChecker from 'webp-checker' // import it;
webpChecker(); // run checker
window.__WEBSUPPORT__ // get notified about browser webp support by this global variable
Advanced:
- In case when you need to set up a better custom config you can throw props as:
import webpChecker from 'webp-checker' // import it;
const config = {
imgURL: 'imgSrc', // your_webp_image_src, by default used google static image
disableGlobal: true, // disable global injection in 'window' object, by default 'false'
injectBodyClass: false, // explicitly set a 'body' class 'webp-support', by default 'true',
callback: status => status // some callback that you want to return with webp checker result 'true/false'
}
webpChecker(config); // run checker