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 