# @logicline/material-ui-image

> Material style image with loading animation

Latest version **1.4.1** (published 2017-07-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install @logicline/material-ui-image
pnpm add @logicline/material-ui-image
yarn add @logicline/material-ui-image
bun add @logicline/material-ui-image
```

## 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 | 1.4.1 |
| Published | 2017-07-11 |
| First published | 2017-07-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | logicline GmbH |
| Maintainers | mgruel |
| Keywords | react, material, image, loading, react-component |

## Links

- npm: https://www.npmjs.com/package/@logicline/material-ui-image
- Repository: https://github.com/logiclinegmbh/material-ui-image
- Homepage: https://github.com/TeamWertarbyte/material-ui-image#readme
- Issues: https://github.com/logiclinegmbh/material-ui-image/issues
- npm.io page: https://npm.io/package/@logicline/material-ui-image

## Dependencies (1)

- [prop-types](https://npm.io/package/prop-types.md) ^15.5.8

## 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

- 1.4.1 (latest) — 2017-07-11

## README

# Material UI Image
[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
[![Build Status](https://travis-ci.org/TeamWertarbyte/material-ui-image.svg?branch=master)](https://travis-ci.org/TeamWertarbyte/material-ui-image)
[![Greenkeeper badge](https://badges.greenkeeper.io/TeamWertarbyte/material-ui-image.svg)](https://greenkeeper.io/)

Images are ugly until they're loaded. Materialize it with material image! It will show a random material color as background and a loading animation until it's fully loaded.

See this component in [action](https://teamwertarbyte.github.io/material-ui-image)

This package is customized to use the scoped `@logicline/material-ui` package. Everything stayed the same.  
The original package is available from npm via [`material-ui-image`](https://www.npmjs.com/package/material-ui-image).

## Installation
```shell
npm i --save @logicline/material-ui-image
```

## Usage

Use this component just like a regular img tag.

```js
import Image from '@logicline/material-ui-image'

// ...

render() {
  return (
    <div>
      <Image
        src="http://loremflickr.com/300/200"
      />
    </div>
  )
}
```

### Material UI Image Properties

|Name            |Type        |Default                                   |Description
|----------------|------------|------------------------------------------|--------------------------------
|src*            | `string`   |                                          | Specifies the URL of an image.
|color           | `string`   | random color                             | Override the background color.
|disableError    | `bool`     | false                                    | Disables the error icon if set to `true`.
|disableSpinner  | `bool`     | false                                    | Disables the loading spinner if set to `true`.
|errorSize       | `integer`  | 48                                       | Set the size of the error icon.
|imageStyle      | `object`   | { width: 'inherit', height: 'inherit' }  | Override the inline-styles of the image.
|loadingSize     | `integer`  | 40                                       | Set the size of the refresh indicator.
|loadingStyle    | `object`   | { position: 'relative' }                 | Override the inline-styles of the refresh indicator.
|onTouchTap      | `func`     |                                          | Fired when the user clicks on the image happened.
|style           | `object`   | { width: 300, height: 200 }              | Override the inline-styles of the root element.

\* required property

## License

The files included in this repository are licensed under the MIT license.

---
_Source: https://npm.io/package/@logicline/material-ui-image · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._