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

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'

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 />
        }
      />
    )
  }
}

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.