Skip to content

🐙 Tiny util for checking browser's webP support ability. Helps to understand is that 🌓 browser has webp support or not 🔔

License

Notifications You must be signed in to change notification settings

BiosBoy/webp-checker

Repository files navigation

WebP Checker

Tweet

The easist way to check webp support in any browser!

npm Price License: MIT GitHub package version

logo_image

How to use:

  • Prepare: Install webp-checker as a regular node_modules package 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 a window variable __WEBPSUPPORT__ (e.g. window.__WEBPSUPPORT__) with boolean value that shows if the webp support is true/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

About

🐙 Tiny util for checking browser's webP support ability. Helps to understand is that 🌓 browser has webp support or not 🔔

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published