0.3.3 • Published 5 years ago
react-pixel v0.3.3
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'))