https://github.com/hiddentao/react-image-holder

React image component with offline placeholder fallbacks
https://github.com/hiddentao/react-image-holder

Last synced: 8 days ago
JSON representation

React image component with offline placeholder fallbacks

• Host: GitHub
• URL: https://github.com/hiddentao/react-image-holder
• Owner: hiddentao
• License: mit
• Created: 2015-08-22T06:06:45.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2017-02-24T11:15:09.000Z (over 7 years ago)
• Last Synced: 2024-10-12T00:38:44.734Z (27 days ago)
• Language: JavaScript
• Homepage: https://hiddentao.github.io/react-image-holder
• Size: 2.85 MB
• Stars: 17
• Watchers: 3
• Forks: 12
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.md

Awesome Lists containing this project

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 `` 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 = (

  

);

```

Output:

```html



```

**Additional attributes**

```js

var realImage = (

  

);

```

Output:

```html



```

**Use a placeholder instead**

```js

var realImage = (

  

);

```

Output:

```html



```

_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 = (

  

);

```

Output:

```html



```

_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)