The library provides Picture
component that will render different size images for different visual breakpoints.
Below is a simple example:
//This is a reusable configurationconst pixboostConfig = {apiKey: 'MTg4MjMxMzM3MA__',domain: 'pixboost.com',breakpoints: {lg: {media: '(min-width: 990px)'},md: {media: '(min-width: 640px)'},sm: {}}};​class YourComponent extends Component {render() {return (<Picture alt={"gadgets"} breakpoints={{lg: {//Will optimise image by defaultsrc: 'https://cdn.pixabay.com/photo/2015/01/21/14/14/apple-606761_960_720.jpg'},md: {src: 'https://cdn.pixabay.com/photo/2015/02/02/15/28/bar-621033_960_720.jpg',op: 'fit?size=300x300'},sm: {//We can hide image for certain breakpointshide: true}}} config={pixboostConfig}/>)}}
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. |