Introducing Pixboost-React Library
We have got some exciting news to share with you. The Pixboost-React library just released by our team!
React is one of the most popular web frameworks these days. After we got quite a few requests from our clients, this task landed on top of our backlog. So, it is in production now and ready to be used as a convenient developer tool. Yep, we do care not only about image performance but also about developers’ productivity when building excellent products.
In this post, I am going to walk you through the features of the library and show how to use them.
Features
Pixboost is a complete end-to-end image processing solution, and this is what makes us unique. Therefore, instead of just offering an API we decided to provide an easy way to implement image optimisation for those who use React framework.
Below is a list of features that the pixboost-react library provides:
- Declarative react components without the need to have imperative code
- Cross browsers support of responsive images
- Cross browsers support of lazy loading
The library is Open Source, and you can find it on GitHub.
How to use
Library published on npm, so to install:
$ npm install pixboost-react
Library provides two components: Image and Picture. Their main purpose is to render respectively <img> and <picture> elements into DOM tree. Both of the components have lazy loading feature enabled by default. To disable you need to set the property lazy to false.
Image component
Image component is used to render a single image that you can transform using pixboost API.
Below is a simple example:
Here the component renders an <img> element that has a source attribute pointing to the original image and op property set to Pixboost API resize endpoint.
The final result is an image that resizes to the width of 200 pixels with preserving aspect ratio.
You can find all supported transformations in our documentation.
List of properties that Image component supports:
Config is a configuration property where you should pass your custom domain name that you setup or “pixboost.com” if you don’t have a custom domain name and API key from your account.
I explain the config object in more details below.
You can also pass other properties that <img> element supports, e.g. width, className, etc.
Picture component
Picture component allows you to render different images on different devices. Combining it with our API is very beneficial; you can avoid the creation of a set of images of different sizes manually. It saves you time and storage cost.
Let’s see how we can use the component in the application:
In this example, we are introducing additional properties for visual breakpoints.
First of all, we need to add visual breakpoints to the configuration object. We are setting media query for each breakpoint so that we can use them in the Picture component. Every breakpoint has URL property that should point to the original image.
The good thing about it is that you can have different images for different devices. op property is setting transformation that applies to the original image.
Lazy loading is turned on by default and can be switched off by setting lazy property to false.
Below is the detailed table of all properties:
Configuration
Configuration object includes settings that can be reused in the codebase.
Under the Hood
The library is using two browsers’ features that its good to be aware of.
First one is picture element that well supported by all modern browsers.
For old browsers, we recommend using picturefill polyfill. It works great, and we didn’t notice any problems with it during our testing. Also, we have some additional integration with it in a case when images are loading dynamically.
The second feature is the intersection observer. It allows us to detect overlapping of elements on the web page. We are using this feature for lazy load images. Most of the current browsers except Safari are supporting it. Safari is using webkit engine and webkit team is actively working on adding support of intersection observer.
You can also use a polyfill to add suppo rt for old browsers, however, make sure that you tested it well as we found some issues with absolute positioned elements in some cases. Without the polyfill library still renders images but without lazy loading.
Conclusion
Convenient tools for developers are an essential part of Pixboost Image Processing Platform.
At Pixboost we focus on making the developer tools as convenient as possible, therefore, please do not hesitate to create issues for us on GitHub repo or email me on dmitry.tech.mate@pixboost.com with your feedback.
Happy coding!
