react-block-image (demo)

> Replacement react component for img that uses a div with background-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

``bash
npm install --save react-block-image


of


yarn add react-block-image
`

Usage

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 (
src='https://example.com/example.jpg'
fallback={placeholder}
showPreview={true}
loader={

}
/>
)
}
}
`

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.