Responsive images

The library provides Picture component that will render different size images for different visual breakpoints.
Below is a simple example:
1
    //This is a reusable configuration
2
    const pixboostConfig = {
3
        apiKey: 'MTg4MjMxMzM3MA__',
4
        domain: 'pixboost.com',
5
        breakpoints: {
6
            lg: {media: '(min-width: 990px)'},
7
            md: {media: '(min-width: 640px)'},
8
            sm: {}
9
        }
10
    };
11
​
12
    class YourComponent extends Component {
13
        render() {
14
            return (
15
                <Picture alt={"gadgets"} breakpoints={
16
                    {
17
                        lg: {
18
                            //Will optimise image by default
19
                            src: 'https://cdn.pixabay.com/photo/2015/01/21/14/14/apple-606761_960_720.jpg'
20
                        },
21
                        md: {
22
                            src: 'https://cdn.pixabay.com/photo/2015/02/02/15/28/bar-621033_960_720.jpg',
23
                            op: 'fit?size=300x300'
24
                        },
25
                        sm: {
26
                            //We can hide image for certain breakpoints
27
                            hide: true
28
                        }
29
                    }
30
                } config={pixboostConfig}/>
31
            )
32
        }
33
    }
Copied!
Properties (mandatory properties marked with *):
Property
Type
Default
Description
breakpoints*
Object
​
Object that sets an option for each visual breakpoint. You can use only breakpoints that you specified in the configuration property
breakpoints.src*
String
​
URL of the original image
breakpoints.op
String
optimise
Operation to perform. By default is optimise.
breakpoints.hide
Boolean
false
If true then will hide image on the breakpoint.
config*
Object
​
Configuration
alt
String
​
alt text for an image
lazy
Boolean
true
If true, then will enable lazy loading for the picture.

Installation

Non-responsive images

Last modified 2yr ago

Copy link