React Image
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.
;; Component { return <Img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkqAcAAIUAgUW0RjgAAAAASUVORK5CYII=' /> ; }
You have also option to set list of responsive images:
Component { 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:
Component { 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:
Component { return <Img src='link-to-image' onError= { console; } onLoad= { console; } /> ; }
Add custom error or loading messages:
Component { 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