npm.io
1.4.1 • Published 9 years ago

@logicline/material-ui-image

Licence
MIT
Version
1.4.1
Deps
1
Vulns
0
Weekly
0
SummaryDependencyVersions

Material UI Image

JavaScript Style Guide Build Status Greenkeeper badge

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

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.

Installation

npm i --save @logicline/material-ui-image

Usage

Use this component just like a regular img tag.

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.

Keywords

reactmaterialimageloadingreact-component