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 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