https://github.com/transitive-bullshit/react-block-image
React replacement for img with more control + fallback support.
https://github.com/transitive-bullshit/react-block-image
background-image img react react-component
Last synced: about 2 months ago
JSON representation
React replacement for img with more control + fallback support.
- Host: GitHub
- URL: https://github.com/transitive-bullshit/react-block-image
- Owner: transitive-bullshit
- Created: 2018-03-16T01:15:42.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-25T10:44:55.000Z (over 2 years ago)
- Last Synced: 2025-03-28T05:12:34.353Z (2 months ago)
- Topics: background-image, img, react, react-component
- Language: JavaScript
- Homepage: https://transitive-bullshit.github.io/react-block-image/
- Size: 1.66 MB
- Stars: 17
- Watchers: 2
- Forks: 3
- Open Issues: 42
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# react-block-image ([demo](https://transitive-bullshit.github.io/react-block-image/))
> React replacement for `img` that uses a `div` with `background-image` for more control + fallback support.
[](https://www.npmjs.com/package/react-block-image) [](https://standardjs.com)
## Features
- **background-image** for easier control over sizing
- **Fallback** image support
- **Loading** customization
- Zero dependencies
- Used in production at [Automagical](https://automagical.ai/)
## Install
```bash
npm install --save react-block-image
# of
yarn add react-block-image
```
## Usage
Check out the [demo](https://transitive-bullshit.github.io/react-block-image/) in the [example folder](https://github.com/transitive-bullshit/react-block-image/tree/master/example).
Minimal:
```jsx
import React, { Component } from 'react'
import BlockImage from 'react-block-image'
class Example extends Component {
render () {
return (
)
}
}
```
With fallback image and loading animation:
```jsx
import React, { Component } from 'react'
import BlockImage from 'react-block-image'
import placeholder from './placeholder.jpg'
class Example extends Component {
render () {
return (
}
/>
)
}
}
```
## 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](https://github.com/transitive-bullshit)
This module was bootstrapped with [create-react-library](https://github.com/transitive-bullshit/create-react-library).
Support my OSS work by following me on twitter 