React-block-image NPM

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

This module was bootstrapped with create-react-library.

@infinitebrahmanuniverse/nolb-react-bl @everything-registry/sub-chunk-2542 @zalastax/nolb-react-bl react-before-after-slider @openstack_dev/gatsby-theme-marketing-oif-core @openeventkit/event-site

1.0.0

6 years ago