react-html-image

0.1.1 • Public • Published

React Image

npm version renovate-app Known Vulnerabilities codecov travis

React component that makes easier to work with image element. It handles loaded, error, loading states.

How to use

Install package:

npm install react-html-image

Set media

The most basic usage of component is just to set a src of image.

import * as React from 'react';
import Img from 'react-html-image';
 
class App extends React.Component {
    render() {
        return (
            <Img
                src={'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkqAcAAIUAgUW0RjgAAAAASUVORK5CYII='}
            />
        );
    }
}

You have also option to set list of responsive images:

class App extends React.Component {
    render() {
        return (
            <Img
                srcSet={[
                    { src: 'link-to-default-image' },
                    { src: 'link-to-bigger-image', sizes: '1024w' },
                ]}
                sizes={'100vw'}
            />
        );
    }
}

Handle states

Wrap element around img gets classes based on state:

class App extends React.Component {
    render() {
        return (
            <Img
                src={'link-to-image'}
                theme={{
                    image: 'imageClass',
                    wrap: 'wrapClass',
                    states: {
                        loading: 'loadingStateClass',
                        ready: 'readyStateClass',
                        error: 'errorStateClass',
                    },
                }}
            />
        );
    }
}

You can also get info about load or error event via callback functions:

class App extends React.Component {
    render() {
        return (
            <Img
                src={'link-to-image'}
                onError={(error) => {
                    console.log(error);
                }}
                onLoad={(event) => {
                    console.log(event);
                }}
            />
        );
    }
}

Add custom error or loading messages:

class App extends React.Component {
    render() {
        return (
            <Img
                src={'link-to-image'}
                loader={('... image is loading ...')}
                error={('... image was not load ...')}
            />
        );
    }
}

List of properties

  • src: ?string - Link to media
  • alt: string - Alt attribute
  • onLoad: (event: Event) => void - Load event
  • onError: (exception: Event) => void - Error event
  • width: ?number - Width of image
  • height: ?number - Height of image
  • srcSet: Array<{ src: string, size?: string }> - List of responsive media
  • sizes: Array - Definition for responsive media
  • theme: { image?: string, wrap?: string, states?: { loading?: string, ready?: string, error?: string, }, } - Theme for image
  • loader: React.Node - Loader state
  • error: React.Node - Error state

Readme

Keywords

none

Package Sidebar

Install

npm i react-html-image

Weekly Downloads

1

Version

0.1.1

License

Apache License 2.0

Unpacked Size

40.3 kB

Total Files

10

Last publish

Collaborators

  • fabulator