React Pixel
Progressive, responsive, lazy, efficient, images.
⚠️ Note: This library is still in alpha, expect breaking changes.
Usage
React Pixel works best with images generated using the react-pixel/generate
API. You can generate an images like this:
Using generated images is simple:
const App = <ImageProvider baseUrl="https://cdn.example.com/images"> <Image image=image // `image` here is the string outputted from the `generate` function. description="A grey sky full of dark clouds." /> </ImageProvider>
Alternatively, you can bring your own images and still use React Pixel for loading them:
const urlBuilder = `/static/images//x.jpg` const Placeholder = <div style= backgroundColor: '#333' height: '100%' width: '100%' const App = <ImageProvider urlBuilder=urlBuilder> <Image image="clouds" description="A grey sky full of dark clouds." sizes=320 180 640 360 1280 720 2560 1440 placeholder=<Placeholder /> /> </ImageProvider>