# react-image-holder-new

> React image component with offline placeholder fallbacks Fork from https://github.com/hiddentao/react-image-holder, and fixed Cannot read property 'string' of undefined error(After React 15 React.PropTypes move to 'prop-types' package.

Latest version **2.0.3** (published 2018-05-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-image-holder-new
pnpm add react-image-holder-new
yarn add react-image-holder-new
bun add react-image-holder-new
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.3 |
| Published | 2018-05-17 |
| First published | 2018-05-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 7.6 KB |
| Known vulnerabilities | 0 (+10 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Jim Jin |
| Maintainers | jimjin |
| Keywords | react, image, placeholder, holder.js |

## Links

- npm: https://www.npmjs.com/package/react-image-holder-new
- Repository: https://github.com/jimjin/react-image-holder
- Issues: https://github.com/jimjin/react-image-holder/issues
- npm.io page: https://npm.io/package/react-image-holder-new

## Dependencies (5)

- [lodash](https://npm.io/package/lodash.md) ~4.11.1
- [holderjs](https://npm.io/package/holderjs.md) ~2.8.1
- [prop-types](https://npm.io/package/prop-types.md) ~15.6.1
- [query-string](https://npm.io/package/query-string.md) ~2.4.0
- [create-react-class](https://npm.io/package/create-react-class.md) ^15.6.3

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.0.3 (latest) — 2018-05-17
- 2.0.2 — 2018-05-16

## README

# react-image-holder

[![Build Status](https://secure.travis-ci.org/hiddentao/react-image-holder.png)](http://travis-ci.org/hiddentao/react-image-holder)

An `<img />` component for React which can render _real_ images as well use an offline _placeholder_ as a fallback if need be.

All placeholders are rendered using [holder.js](https://github.com/imsky/holder), meaning they will work even when offline. You can even configure the component to always render a placeholder for all its instances.

[View demo](https://hiddentao.github.io/react-image-holder)

## Installation

```bash
$ npm install react-image-holder
```

## Examples

All examples assume you have `require()`-d the component:

```js
var Img = require('react-image-holder');
```

**A real image**

```js
var realImage = (
  <Img src="http://animalia-life.com/data_images/cat/cat5.jpg" />
);
```

Output:

```html
<img src="http://animalia-life.com/data_images/cat/cat5.jpg" />
```

**Additional attributes**

```js
var realImage = (
  <Img src="http://animalia-life.com/data_images/cat/cat5.jpg" 
    width="802"
    height="450"
    className="cat-photo" />
);
```

Output:

```html
<img width="802" height="450" class="cat-photo" src="http://animalia-life.com/data_images/cat/cat5.jpg" />
```


**Use a placeholder instead**

```js
var realImage = (
  <Img src="http://animalia-life.com/data_images/cat/cat5.jpg" 
    width="802"
    height="450"
    className="cat-photo" 
    usePlaceholder={true}
    />
);
```

Output:

```html
<img class="cat-photo" data-src="holder.js/802x450?auto=true&theme=vine" />
```

_Holder.js then processes the above tag and renders a placeholder_.



**Setting placeholder properties**

```js
var placeholderProps = {
  theme: 'blue',
  size: 50,
  auto: false,
};

var realImage = (
  <Img src="http://animalia-life.com/data_images/cat/cat5.jpg" 
    width="802"
    height="450"
    usePlaceholder={true}
    placeholder={placeholderProps}
    />
);
```

Output:

```html
<img data-src="holder.js/802x450?auto=false&size=50&theme=blue" />
```

_See [holder.js property list](https://github.com/imsky/holder) for all available properties_.


**Global placeholders**

Rather than passing the `usePlaceholder` property to each instance of the component you can 
also set this property's default value at the start of your app:

```js
Img.DEFAULT_PROPS.usePlaceholder = true;
```

Now all subsequent instances of the component will automatically use a 
placeholder image. And you can still override the setting on per-instance basis!


## Building

```bash
$ npm install
$ npm run build
```

## Contributing

Contributions are welcome! Please see [CONTRIBUTING.md](https://github.com/hiddentao/react-image-holder/blob/master/CONTRIBUTING.md).


## License

MIT - see [LICENSE.md](https://github.com/hiddentao/react-image-holder/blob/master/LICENSE.md)

---
_Source: https://npm.io/package/react-image-holder-new · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._