Noteworthy Puppy Movies

    webp-checker

    1.1.3 • Public • Published

    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
    

    Install

    npm i webp-checker

    DownloadsWeekly Downloads

    4

    Version

    1.1.3

    License

    MIT

    Unpacked Size

    90.2 kB

    Total Files

    13

    Last publish

    Collaborators

    • biosboy