react-resizin

React components for easy displaying images from Resizin image server.

Table of contents

• Installation
• Quick start
• API
  • ResizinProvider
  • Image
  • useImage

Installation

Using npm:

npm i -s react-resizin

Using yarn:

yarn add react-resizin

Quick start

const { ResizinProvider, Image } = require('react-resizin');

const App = () => (
    <ResizinProvider bucket="ackee">
        <Image
            imgId="walle"
            options={{
                width: 400,
                filter: "greyscale",
            }}
            alt="Walle image" 
        />
    </ResizinProvider>
);

React.render(<App>, document.body);

---

API

ResizinProvider

You typically need only one provider in your app. It cares about supplying Resizin to all Image components that it contains.

Props

• bucket - Name of your image server instance bucket.
• serverUrl - Image server url. It's optional and defaults to https://img.resizin.com.

ResizinProvider examples

Image

Render image as a standard img tag (unless you provide children func, see below).

Props

• imgId - Image identificator.
• options - Image modifiers as defined at docs.
• All other props are passed over to the img element.
• children - If you need to render image in different way than as an img, provide a function as a component children. The function has the image url as a first argument.

Image examples

useImage

Image url can also be generated with this React hook. It has a signature

useImage(imageId, imgOptions)

and can be used as

import { ResizinProvider, useImage } from 'react-resizin';

const MyContent = () => {
    const url = useImage('walle', {
        filter: 'blur',
        width: 300,
        height: 200,
    });
    return (
        <div
            style={{
                backgroundImage: `url(${url})`
            }}
        >
            I'm Wall-E
        </div>
    )
}

render(
    <ResizinProvider bucket="ackee">
        <MyContent>
    </ResizinProvider>
)

License

MIT