Skip to main content

React Image Displayer

An image loader React component that displays/mounts the image only after it is successfully loaded. It has three key features:

  1. Built-in spinners: The built-in spinner is displayed while the image is loading. 20+ spinners could be used via React Spinners library.

  2. Enter Animations: After the image is loaded, it appears with an enter animation. 10+ animations could be used via Framer Motion library.

  3. JWT Support: <img> tag does not support JWT authentication. However, using this component, they are fetched effortlessly by only passing the JWT token through the token prop.

Getting Started​

Let's discover React Image Displayer in less than 2 minutes.

Installation​

Install react-image-displayer with via your package manager:

npm i react-image-displayer

Usage​

Import the component:

import ImageDisplayer from 'react-image-displayer';

Simply, use it:

<ImageDisplayer url={enterImageURLHere} />

Example​

<ImageDisplayer
  url={imageUrl}
  token={token}
  delay={1000}
  enterAnimation={['blur', 1]}
  imageStyle={{
    borderBottomLeftRadius: '11px',
    borderBottomRightRadius: '11px',
  }}
  spinner={{
    color: 'var(--color2)',
    size: '1rem',
    spinnerType: 'BeatLoader',
  }}
/>

Result

Usage - ItemDisplayer​

Import the component:

import { ItemDisplayer } from 'react-image-displayer';

Then, use it:

<ItemDisplayer>{/*Just put your item here... */}</ItemDisplayer>

Example - ItemDisplayer​

const [loaded, setLoaded] = useState(false);

  useEffect(() => {
    setTimeout(() => {
      setLoaded(true);
    }, 4000);
  });

  return (
    <div style={{ width: '50vw', margin: 'auto' }}>
      <ItemDisplayer
        loaded={loaded}
        spinner={{
          spinnerType: 'BeatLoader',
          color: 'blue',
        }}
        enterAnimation={['fade', 2]}
      >
        <img
          src="https://upload.wikimedia.org/wikipedia/commons/0/01/Grand_Canyon_Powell_Point_Evening_Light_02_2013.jpg"
          width="100%"
        />
      </ItemDisplayer>
    </div>
  );
/>

Result