1.1.3 • Published 5 years ago
webp-checker v1.1.3
WebP Checker
The easist way to check webp support in any browser!
How to use:
- Prepare:
Install
webp-checker
as a regularnode_modules
package via:
or yarn:npm i web-checker
Important! - you need to runyarn add web-checker
webp-checker
as soon as possible inside the very first component/module that has an interaction with the whole DOM. For example increate-react-app
you probably should run the below script example in thecomponentDidMount()
method of the root App.js component (or if you're usingRedux
state managment inside itsinitialState.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 awindow
variable__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