react-block-image

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.