@vivid-planet/react-image

Image component with loading animation for react

Usage no npm install needed!

<script type="module">
  import vividPlanetReactImage from 'https://cdn.skypack.dev/@vivid-planet/react-image';
</script>

README

react-image

NPM Version NPM Downloads

react-image renders a image with loading animation in React.

Installation

npm install --save @vivid-planet/react-image

You can then import react-image and its styles in your application as follows:

import Image from '@vivid-planet/react-image';
import '@vivid-planet/react-image/dist/react-image.css';

Usage

The Image object has three required props:

  • src: Specifies the URL to the image
  • width: Specifies the width
  • height: Specifies the height
<Image
    src="www.example.com/foo.jpg"
    width={640}
    height={480}
/>

Additional Props

  • className: Specifies one or more classnames for this image element
  • alt: Specifies an alternate text
  • title: Specifies extra information
  • onClick: Callback function which will be executed on click event