react-material-image

Display an image in material style with loading animation

Usage no npm install needed!

<script type="module">
  import reactMaterialImage from 'https://cdn.skypack.dev/react-material-image';
</script>

README

Image in Material Design

Ever wanted to have a beautiful image with loading animation in material design? Well here you go.

Installation

npm i --save react-material-image

Usage

Use this component just like a regular img tag.

import { ReactMaterialImage } from 'react-material-image'

// ...

render() {
  return (
    <div>
      <ReactMaterialImage
        src="http://lorempixel.com/g/400/200"
      />
    </div>
  )
}

Properties

Name Type Default Description
src* string Image url
style object { width: 300, height: 200 } Override the inline-styles of the root element
imageStyle object { width: 'inherit', height: 'inherit' } Override style prop for img
loadingSize number 40 Set RefreshIndicator size
loadingStyle object { position: 'relative' } Override style prop for RefreshIndicator
  • required property

License

The scripts included in this repository are licensed under the MIT.