# react-pixel

> Progressive, responsive, lazy, efficient, images.

Latest version **0.3.3** (published 2019-01-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-pixel
pnpm add react-pixel
yarn add react-pixel
bun add react-pixel
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.3 |
| Published | 2019-01-05 |
| First published | 2018-12-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 308.4 KB |
| Known vulnerabilities | 0 (+4 in 1 direct dependencies) |
| Install scripts | no |
| Author | Mark Murray |
| Maintainers | mmmurray |

## Links

- npm: https://www.npmjs.com/package/react-pixel
- Repository: https://github.com/mmmurray/react-pixel
- Homepage: https://github.com/mmmurray/react-pixel#readme
- Issues: https://github.com/mmmurray/react-pixel/issues
- npm.io page: https://npm.io/package/react-pixel

## Dependencies (4)

- [hasha](https://npm.io/package/hasha.md) ^3.0.0
- [sharp](https://npm.io/package/sharp.md) ^0.21.1
- [fs-extra](https://npm.io/package/fs-extra.md) ^7.0.1
- [react-lazyload](https://npm.io/package/react-lazyload.md) ^2.3.0

## Recent versions

- 0.3.3 (latest) — 2019-01-05
- 0.3.2 — 2019-01-02
- 0.3.1 — 2019-01-02
- 0.3.0 — 2019-01-02
- 0.2.0 — 2019-01-01
- 0.1.3 — 2019-01-01
- 0.1.2 — 2019-01-01
- 0.1.1 — 2019-01-01
- 0.1.0 — 2019-01-01
- 0.0.1 — 2018-12-31

## README

# React Pixel

[![Travis](https://img.shields.io/travis/mmmurray/react-pixel.svg)](https://travis-ci.org/mmmurray/react-pixel)
[![npm](https://img.shields.io/npm/v/react-pixel.svg)](https://www.npmjs.com/package/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:

```js
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:

```js
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:

```js
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'))
```

---
_Source: https://npm.io/package/react-pixel · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._