@chan_alston/image

React Image Component

A simple, easy to use image component for React. (Compatible with NextJs)

Installation

npm install @chan_alston/image@latest --save

Image usage

import styles from "./image.module.css";

import React from "react";
import Image from "@chan_alston/image";

import myImg from "../public/myImg.jpg";
import myImgSmall from "../public/myImgSmall.jpg";
import myImgMedium from "../public/myImgMedium.jpg";
import myImgBig from "../public/myImgBig.jpg";

const ImageComponent = ({ image }) => (
  <figure>
    <Image
      src={myImg} 
      alt="my image"
      w="100px"  // w stands for width
      h="100px" // h stands for height
      className={`${styles.myImage} ${styles.imgContainer} img`}
      srcSet={`${myImgSmall} 500w,
              ${myImgMedium} 900w,
              ${qmyImgBig} 1400w`}
      sizes="(min-width: 66em) 33vw,
            (min-width: 44em) 50vw,
            100vw"
      responsive  // default to true
      priority={false} // default to false
      placeholder="https://via.placeholder.com/512"
    />
    <figcaption>This is my image</figcaption>
  </figure>
);

export default ImageComponent;

Properties of Image

Properties	Type	Required	Default Value
src	String or StaticImageData	true
alt	String	true
w	String or Number	false
h	String or Number	false
className	String	false
srcSet	String	false
sizes	String	false
responsive	Boolean	false	true
priority	Boolean	false	false
imgRef	React.MutableRefObject	false	null
style	CSSProperties	false	{}
placeholder	String or StaticImageData	false

Notes

• When w(width) and/or h(height) is set, responsive is set to false by default, unless explicitly specify with responsive.