Material Ui Image

Material style image with loading animation
Alternatives To Material Ui Image
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Awesome React Components37,045
17 days ago2cc0-1.0
Curated List of React Components & Libraries.
React Admin22,9142121548 hours ago239July 21, 2023100mitTypeScript
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 Paper11,2626834133 days ago179August 02, 2023119mitTypeScript
Material Design for React Native (Android & iOS)
Onsenui8,72235227a month ago139December 27, 202216JavaScript
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 Fundamentals5,015
3 months ago4otherJavaScript
Material for my React Fundamentals Workshop
React Native Material Kit4,8423059a year ago25February 18, 2020184mitTypeScript
Bringing Material Design to React Native
Primereact4,5531642577 hours ago128August 01, 2023248mitCSS
The Most Complete React UI Component Library
React Native Material Ui3,783233195 months ago45April 20, 2019216mitJavaScript
Highly customizable material design components for React Native
Material Table3,4402641773 months ago193June 18, 202316mitJavaScript
Datatable for React based on material-ui's table with additional features
Browser Base2,62924 months ago2October 19, 2020105TypeScript
Modern and feature-rich web browser base based on Electron
Alternatives To Material Ui Image
Select To Compare

Alternative Project Comparisons

Material UI Image

JavaScript Style Guide Build Status

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



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.


Use this component just like a regular img tag.

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.


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

Popular Material Projects
Popular Reactjs Projects
Popular User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Material Ui
Inline Styles
Loading Spinner