Skip to content

transitive-bullshit/react-block-image

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

react-block-image (demo)

React replacement for img that uses a div with background-image for more control + fallback support.

NPM JavaScript Style Guide

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.

Support my OSS work by following me on twitter twitter

About

React replacement for img with more control + fallback support.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published