Urami

Appearance

React ​

Optimized image component for React.

Install ​

sh
$ npm add @urami/react
$ npm add @urami/react
sh
$ pnpm add @urami/react
$ pnpm add @urami/react
sh
$ yarn add @urami/react
$ yarn add @urami/react
sh
$ bun add @urami/react
$ bun add @urami/react

Usage ​

tsx
import Image from "@urami/react";

const Component = () => {
  return (
    <Image
      src="https://httpmemes.netlify.app/200.jpg"
      width={801}
      height={801}
      alt="Tom Scott"
      className="rounded-xl shadow-md"
    />
  );
};
import Image from "@urami/react";

const Component = () => {
  return (
    <Image
      src="https://httpmemes.netlify.app/200.jpg"
      width={801}
      height={801}
      alt="Tom Scott"
      className="rounded-xl shadow-md"
    />
  );
};

Props ​

NameTypeDefaultRequiredDescription
srcstring-✅Source of the image
widthnumber-✅Width of the image
heightnumber-❌Height of the image (Specify this will results in less layout shift)
qualitynumber75❌Quality of the image
loaderfndefaultLoader❌Loader function, please refer to Loader
formatsstring[]['webp', 'jpg']❌Formats to generate for the <picture> element