demo)
react-block-image (Replacement react component for
img
that uses adiv
withbackground-image
for more control + fallback support.
Features
- background-image for easier control over sizing
- Fallback image support
- Loading customization
- Zero dependencies
- Used in production at Automagical
Install
npm install --save react-block-image# of yarn add react-block-image
Usage
Check out the (demo) in the example folder.
Minimal:
import React Component from 'react' import BlockImage from 'react-block-image' { return <BlockImage ='https://example.com/example.jpg' /> }
With fallback image and loading animation:
import React Component from 'react' import BlockImage from 'react-block-image'import placeholder from './placeholder.jpg' { return <BlockImage ='https://example.com/example.jpg' = = = /> }
Props
Property | Type | Default | Description |
---|---|---|---|
src |
string |
undefined |
Required URL of the preferred image source. |
fallback |
string |
undefined |
Optional URL of a fallback image. |
children |
node |
undefined |
Optional children. |
showPreview |
boolean |
false |
Whether or not to show fallback while preferred src is loading. |
loader |
node |
undefined |
Optional node to show while src is loading. |
backgroundSize |
string |
cover |
Convenience prop for setting background-size on style . |
backgroundPosition |
string |
center center |
Convenience prop for setting background-position on style . |
backgroundRepeat |
string |
no-repeat |
Convenience prop for setting background-repeat on style . |
style |
object |
undefined |
Optional style overrides for root element. |
className |
string |
undefined |
Optional className override for root element. |
... |
... |
undefined |
All other props are applied to the root element. |
License
MIT © transitive-bullshit
This module was bootstrapped with create-react-library.