react-picture-webp v1.1.9

React-Picture-webP

Serve any images' retina set with easy by react-picture-webp (Intelligent webP support included)!

How to use:

• Prepare: Install react-picture-webp as a regular node_modules package via:

    npm i react-picture-webp

  or yarn:

    yarn add react-picture-webp

  WebP Important Notice! - to serve webP images via react-picture-webp you need to install webp-checker package via npm i web-checker or yarn add webp-checker. And then run it as soon as possible inside the very first component/module that has an interaction with the whole DOM. (more details here: https://github.com/BiosBoy/webp-checker/readme.md)

Quick Start:

• You can start using react-picture-webp with just name, path and type fields providing. Only one important notice about folder structure. As this package works with the varios layouts (mobile, tablet, desktop, ect.), you need to put your images consistently by its folders. For example:

   root ---|
           | images ---| // or some particupar image folder
                       | desktop --- |
                                     | landscape@1x.png
                                     | landscape@2x.png
                                     | landscape@1x.webp // Tip: you can avoid webp format if needed.
                                     | landscape@2x.webp
                       | tablet  --- |
                                     | landscape@1x.png
                                     | landscape@2x.png
                                     | landscape@1x.webp
                                     | landscape@2x.webp
                       | mobile  --- |
                                     | landscape@1x.png
                                     | landscape@2x.png
                                     | landscape@1x.webp
                                     | landscape@2x.webp
                       | any etc --- | // some other folder with custom resolutions

  This is only one strict requirement while using this package. Probably it would be improved in future, but for not it's the only one way to easily serve various images resolutions inside one <picture />.

  So, if your image's folder structure looks like above, you can go ahead and start using this awesome package!

  -- Example:

    // ...some logic
    import Picture from 'react-picture-webp'
  
    class App extends React.Component {
      // ...some logic
    
      render() {
        return (
          <// ..some view start>
            <Picture name='landscape' path='root/images/' pixelDensity={2} type='png' />
          <// ..some view end>
        )
      }
    }

Advanced:

• In case when you need to set up a better custom config you can throw props as object.

  -- Example:

    import Picture from 'react-picture-webp' // import it;
  
    const config = {
      alt: 'alt_text', // basic alt text for `img` tag describing
      type: 'png', // type of the image provided
      path: 'root/images/', // path to your image (**important:** do not add path here with resolutions' paths including)
      name: 'landscape', // image name
      pixelDensity: 4, // count of the images densinity
      extraResolutions: { // resolutions to layout. By default `react-picture-webp` will serve all these three image resolutions
        desktop: 'min-width: 1001px',
        tablet: 'max-width: 1000px',
        mobile: 'max-width: 600px'
      },
      classes: { // some classes for providing CSS control for your `<picture />`
        picture: 'some_class',
        img: 'some_class'
      }
    }
    
    return (
      <Picture {...config} />
    ); // run picture