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:

import { generate } from 'react-pixel/generate'

generate({
  image: '/absolute/path/to/image.jpg',
  output: '/absolute/path/to/output/directory',
}).then(({ image }) => {
  // `image` is a string that encodes all information about the generated images.
  // Store this in a file or database so that it can be passed as a prop to the
  // `Image` React component.
  // You should host the contents of the `output` directory and make a note of the
  // base URL for this directory. This will need to be passed to the `ImageProvider`
  // React component.
})

Using generated images is simple:

import React from 'react'
import { render } from 'react-dom'
import { Image, ImageProvider } from 'react-pixel'

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>
)

render(<App />, document.getElementById('root'))

Alternatively, you can bring your own images and still use React Pixel for loading them:

import React from 'react'
import { render } from 'react-dom'
import { Image, ImageProvider } from 'react-pixel'

const urlBuilder = ({ image, width, height }) => `/static/images/${image}/${width}x${height}.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>
)

render(<App />, document.getElementById('root'))