react-default-source

Github https://github.com/rlterry00/react-default-source

About

This a small library that extends the default <img /> tag in react to have a default source image that is available as a fallback in image fails. By default there is no default source prop on an images and you have to create custom solutions based on onError and onLoad events. This a good tool to use if you are not using a UI library that could have a built in solution in ther <img /> components. The only dependencies in this library are react.

License

MIT License

A short and simple permissive license with conditions only requiring preservation of copyright and license notices. Licensed works, modifications, and larger works may be distributed under different terms and without source code.

Installation

npm i react-default-source

Using The Library

Instead of using the standard <img /> tag you will use <DefaultSourceImage /> which extends the standard image component. All original <img /> props are inherited in <DefualtSourceImg />

| Prop | Description | Type | Default | | ------------------- | ---------------------------------------------------------------- | ------ | --------------------------------- | | sourceImg | Source image for image component. | string | Required | | defaultSourceImg | Default image if image does not load. | string | Required | | imageContainerStyle | Styles for the container div wrapped around the image component. | object | Optional | | imageStyle | Styles for the image. | object | Required for URL or remote images | | alt | Alternative accessibility text description of image. | string | Optional |

Example

import React, {useState, useEffect} from 'react';
import DefaultSourceImage from 'react-default-source';
import sourceImage from '../assets/avatar.png'
const Component = props => {
  const [userImage, setUserImage] = useState([]);
  useEffect(() => {
    //Fetching user image
    const getUserImage = async () => {
      return fetch('https://randomuser.me/api/')
        .then(response => response.json())
        .then(json => {
          const data = json.picture.large;
          setUserImage(data);
        })
        .catch(error => {
          console.error(error);
        });
    };
    getUserImage();
  }, []);


  return (
    <div>
        <DefaultSourceImage
          imageStyle={{ width: 100, height: 100 }}
          defaultSourceImg={sourceImage}
          sourceImg={userImage}
          alt="avatar"
        />
    </div>
  );
};