Package Exports

react-pixels
react-pixels/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-pixels) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Pixels Image Preview

Pixels Image React Component

A React component for applying filters to images using the Pixels.js library (https://silvia-odwyer.github.io/pixels.js/)

Demo

Check out the CodeSandbox Demo to see the Pixels Image React Component in action!

Installation
Usage

Installation

You can install the Pixels Image React Component using npm:

npm install react-pixels

or yarn:

yarn add react-pixels

Usage

Apply Pixels.js Filters

import React from 'react';
import { PixelsImage } from 'react-pixels';

function App() {
  return (
    <div>
      <h1>Pixels Image React Component</h1>
      <PixelsImage
        src="path/to/your/image.jpg"
        filter="greyscale" // or ["greyscale", ...] to apply more than one filter
      />
    </div>
  );
}

export default App;

Edit saturation, brightness, contrast

import React from 'react';
import { PixelsImage } from 'react-pixels';

function App() {
  return (
    <div>
      <h1>Pixels Image React Component</h1>
      <PixelsImage
        src="path/to/your/image.jpg"
        saturation={0.5} // -1 to 1 (-100% to 100%)
        brightness={1} // -1 to 1 (-100% to 100%)
        contrast={-0.2} // -1 to 1 (-100% to 100%)
      />
    </div>
  );
}

export default App;

Flip Image

import React from 'react';
import { PixelsImage } from 'react-pixels';

function App() {
  return (
    <div>
      <h1>Pixels Image React Component</h1>
      <PixelsImage
        src="path/to/your/image.jpg"
        horizontalFlip={true} // flip image horizontal
        verticalFlip={false} // flip image vertical
      />
    </div>
  );
}

export default App;

Fast Load

import React from 'react';
import { PixelsImage } from 'react-pixels';

function App() {
  return (
    <div>
      <h1>Pixels Image React Component</h1>
      <PixelsImage
        src={image} // HTMLImageElement (ref or instance of "new Image()")
        filter="greyscale"
      />
    </div>
  );
}

export default App;

Image Source Cached

import React, { useEffect, useState } from 'react';
import { PixelsImage, getImageSource, PixelsImageSource } from 'react-pixels';

function App() {
  const [source, setSource] = useState<PixelsImageSource>();

  useEffect(() => {
    getImageSource("./your-image.png").then(setSource)
  }, [])

  return (
    <div>
      <h1>Pixels Image React Component</h1>
      {source && <PixelsImage
        src={source} // Cached image
        filter="greyscale"
      />}
    </div>
  );
}

export default App;

Export image

import React from 'react';
import { PixelsImage } from 'react-pixels';

function App() {
  return (
    <div>
      <h1>Pixels Image React Component</h1>
      <PixelsImage
        src="path/to/your/image.jpg"
        filter="greyscale" // or ["greyscale", ...] to apply more than one filter
        brightness={0.2}
        onFilter={async (exportObject) => {
            await exportObject.getBlob() // for large images
            exportObject.getDataURL() // for small images
            exportObject.getCanvas() // get canvas object
            await exportObject.getImageFromDataURL() // same as getDataURL but as a <img> element
            await exportObject.getImageFromBlob() // same as getBlob but as a <img> element
        }}
      />
    </div>
  );
}

export default App;

react-pixels