Replacement react component for img that uses background-image for more control + fallback support.
npm install react-block-image> Replacement react component for img that uses a div with background-image for more control + fallback support.
 
- background-image for easier control over sizing
- Fallback image support
- Loading customization
- Zero dependencies
- Used in production at Automagical
``bash`
npm install --save react-block-imageof
yarn add react-block-image
Check out the (demo) in the example folder.
Minimal:
`jsx
import React, { Component } from 'react'
import BlockImage from 'react-block-image'
class Example extends Component {
render () {
return (
)
}
}
`
With fallback image and loading animation:
`jsx
import React, { Component } from 'react'
import BlockImage from 'react-block-image'
import placeholder from './placeholder.jpg'
class Example extends Component {
render () {
return (
fallback={placeholder}
showPreview={true}
loader={
}
/>
)
}
}
`
| 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.