https://github.com/teamwertarbyte/material-ui-image

Material style image with loading animation
https://github.com/teamwertarbyte/material-ui-image

image loader material-ui react

Last synced: 3 days ago
JSON representation

Material style image with loading animation

• Host: GitHub
• URL: https://github.com/teamwertarbyte/material-ui-image
• Owner: TeamWertarbyte
• License: mit
• Created: 2016-10-15T14:04:50.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T01:31:54.000Z (about 2 years ago)
• Last Synced: 2025-01-20T21:08:32.614Z (10 days ago)
• Topics: image, loader, material-ui, react
• Language: JavaScript
• Homepage: https://mui.wertarbyte.com/#material-ui-image
• Size: 2.81 MB
• Stars: 213
• Watchers: 7
• Forks: 40
• Open Issues: 29
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

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)

Images are ugly until they're loaded. Materialize it with material image! It will fade in like the material image loading pattern suggests.

![Example](demo.gif)

## Installation

```sh

npm install material-ui-image

```

**Note:** This is the version for Material-UI 1.0.0-rc.0 or later. If you are using Material-UI 1.0.0-beta, you should update to the latest version. If you are still using Material-UI 0.x, you can use our [legacy version][legacy].

## Usage

Use this component just like a regular img tag.

```jsx

import Image from 'material-ui-image'

```

### Material UI Image Properties

|Name               |Type        |Default                                   |Description

|-------------------|------------|------------------------------------------|--------------------------------

|animationDuration  | `number`   | 3000                                     | Duration of the fading animation, in milliseconds.

|aspectRatio        | `float`    | (1/1)                                    | Specifies the aspect ratio of the image.

|cover              | `bool`     | false                                    | Override the image's object fit to `cover`

|color              | `string`   | white                                    | 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`.

|disableTransition  | `bool`     | false                                    | Disables the transition if set to `true`.

|errorIcon          | `node`     |                           | Override the error icon.

|iconContainerStyle | `object`   |                                          | Override the inline-styles of the container that contains the loading spinner and the error icon.

|imageStyle         | `object`   | { width: 'inherit', height: 'inherit' }  | Override the inline-styles of the image.

|loading            | `node`     |            | Override the loading component.

|onClick            | `func`     |                                          | Fired when the user clicks on the image happened.

|src*               | `string`   |                                          | Specifies the URL of an image.

|style              | `object`   |                                          | Override the inline-styles of the root element.

\* required property

All other props are passed through to the underlying `img` element after the image is loaded.

## License

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

[legacy]: https://github.com/TeamWertarbyte/material-ui-image/tree/legacy