biosboy / webp-checker

:octopus: Tiny util for checking browser's webP support ability. Helps to understand is that :first_quarter_moon: browser has webp support or not :bell:

WebP Checker

The easist way to check webp support in any browser!

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