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

Installation

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.

Usage

Use this component just like a regular img tag.

import Image from 'material-ui-image'

<Image
  src="http://loremflickr.com/300/200"
/>

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.

Project Name	Stars	Repos Using This	Packages Using This	Most Recent Commit	Total Releases	Latest Release	Open Issues	License	Language
Awesome React Components	37,045			17 days ago			2	cc0-1.0
Curated List of React Components & Libraries.
React Admin	22,914	212	154	8 hours ago	239	July 21, 2023	100	mit	TypeScript
A frontend Framework for building B2B applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Design
React Native Paper	11,262	683	413	3 days ago	179	August 02, 2023	119	mit	TypeScript
Material Design for React Native (Android & iOS)
Onsenui	8,722	352	27	a month ago	139	December 27, 2022	16		JavaScript
Mobile app development framework and SDK using HTML5 and JavaScript. Create beautiful and performant cross-platform mobile apps. Based on Web Components, and provides bindings for Angular 1, 2, React and Vue.js.
React Fundamentals	5,015			3 months ago			4	other	JavaScript
Material for my React Fundamentals Workshop
React Native Material Kit	4,842	305	9	a year ago	25	February 18, 2020	184	mit	TypeScript
Bringing Material Design to React Native
Primereact	4,553	164	257	7 hours ago	128	August 01, 2023	248	mit	CSS
The Most Complete React UI Component Library
React Native Material Ui	3,783	233	19	5 months ago	45	April 20, 2019	216	mit	JavaScript
Highly customizable material design components for React Native
Material Table	3,440	264	177	3 months ago	193	June 18, 2023	16	mit	JavaScript
Datatable for React based on material-ui's table with additional features
Browser Base	2,629		2	4 months ago	2	October 19, 2020	105		TypeScript
Modern and feature-rich web browser base based on Electron

Material Ui Image

Material UI Image

Installation

Usage

Material UI Image Properties

License