react-block-image (demo)
React replacement for
imgthat uses adivwithbackground-imagefor more control + fallback support.
- background-image for easier control over sizing
- Fallback image support
- Loading customization
- Zero dependencies
- Used in production at Automagical
npm install --save react-block-image
# of
yarn add react-block-imageCheck out the demo in the example folder.
Minimal:
import React, { Component } from 'react'
import BlockImage from 'react-block-image'
class Example extends Component {
render () {
return (
<BlockImage src='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'
class Example extends Component {
render () {
return (
<BlockImage
src='https://example.com/example.jpg'
fallback={placeholder}
showPreview={true}
loader={
<MyLoadingAnimation />
}
/>
)
}
}| 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. |
MIT © transitive-bullshit
This module was bootstrapped with create-react-library.
Support my OSS work by following me on twitter
