npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

mui-image

v1.0.7

Published

Display images as per the Material guidelines. For React apps using Material-UI v5.

Downloads

47,236

Readme

If you're already using Material-UI v5, why not display your images according to the Material guidelines too?

Illustrations and photographs may load and transition in three phases at staggered durations, rather than relying on opacity changes alone.

Visualize the image fading in, like a print during the photo development process.

- Material guidelines

1. Install

npm i mui-image

or

yarn add mui-image

Using TypeScript? Also add @types/mui-image 🥳

2. Use

import Image from 'mui-image'

// or

import { Image } from 'mui-image'

// then

<Image src="my-image.png" />

3. Profit 💰

Note: Profits not guaranteed and MUI v5 is a peer dependency. If you need to support legacy versions of Material-UI, use material-ui-image instead. See the comparison chart below for more.

Usage Examples

You can use mui-image like a regular image.

<Image src="my-image.png" />

Except... it will fade and animate in as the Material guidelines recommend. 🤯

Add a height and/or width to reserve space on the page for the image and avoid uncomforable content shifts as your picture loads. They both default to 100% of the parent you place them in and accept any valid CSS property. Numbers are converted to pixels.

<Image src="my-image.png" width={500} />
<Image src="my-image.png" height="90vh" />

Apply the showLoading prop to add a progress indicator to let your fans know something amazing is coming. You can use the default MUI indicator or bring your own. 😎

<Image src="my-image.png" showLoading />
<Image src="my-image.bmp" showLoading={<MyCustomSpinner />} />

If you want the image to fail silently you can disable the errorIcon, or you can add your own to suit your brand.

<Image src="my-cats.png" errorIcon={null} />
<Image src="my-dogs.png" errorIcon={<MyErrorIcon />} />

If you want to disobey Google 😵 then you can customise the animation and speed via the duration and easing props to any valid CSS property. Duration is always milliseconds.

<Image src="my-fish.png" duration={325} />
<Image src="my-bird.jpg" easing="ease-in-out" />

To add that extra bit of spice 🌶 you can do exactly what Google suggests and apply a small position shift to images as they appear. The direction, distance, and duration (in milliseconds) are up to you.

<Image src="my-lawd.png" shift="left" />
<Image src="my-gawd.jpg" shift="bottom" distance={300} />
<Image src="my-gosh.gif" shift="top" distance="2rem" shiftDuration={320} />

And of course, you can style mui-image like you would a regular image... but with the addition of the MUI v5 sx prop and all the benefits it brings. 😏

<Image src="my-self.jpeg" style={{ borderRadius: 16 }} />
<Image src="my-wife.webp" className="custom-class" />
<Image src="my-exgf.tiff" sx={{ display: { sm: 'none', lg: 'inline' }}} />

If you want to get fancy 💃 you can also add inline styles and additional className's to the root wrapper div and loading/error icon wrapper div, or just target their default className's. This allows for complete customisation of every aspect of the component.

Like and subscribe below for more. ⏬

Props

| Name | Type | Default | Description | | -------------------- | ---------------- | ---------------------------- | -------------------------------------------------------------------------------------------------------------------------- | | alt | string | "" | image alt tag value | | bgColor | string | "inherit" | the color the image transitions in from | | className | string | "mui-image-img" | CSS class for the image | | distance | string / number | 100 | any valid CSS length value (for the shift) | | duration | number | 3000 | sets the CSS transition-duration in milliseconds | | easing | string | cubic-bezier(0.7, 0, 0.6, 1) | sets the CSS transition-timing-function | | errorIcon | boolean / node | true | display default error icon, or your own | | fit | string | "contain" | any valid CSS object-fit value | | height | number / string | "100%" | any valid CSS height value | | iconWrapperClassName | string | "mui-image-iconWrapper" | CSS class for the icon wrapper div | | iconWrapperStyle | object | | inline styles for the icon wrapper div | | position | string | "relative" | any valid CSS position value | | shift | boolean / string | false | either "left", "right", "top", "bottom", null, or false | | shiftDuration | number | duration * 0.3 | duration of shift in milliseconds | | showLoading | boolean / node | false | display default loading spinner, or your own | | src * | string | | image src tag... required | | style | object | | inline styles for the image | | width | number / string | "100%" | any valid CSS width value | | wrapperClassName | string | "mui-image-wrapper" | CSS class for the root wrapper div | | wrapperStyle | object | | inline styles for the root wrapper div |

* required prop

Any other props (eg. sx, onLoad) are passed directly to the native img element.

Material guidelines for loading images

✅ Fade-in

Visualize the image fading in, like a print during the photo development process.

✅ Opacity, exposure, and saturation recommendations

Images should begin loading with low contrast levels and desaturated color. Once image opacity reaches 100%, display the image with full-color saturation.

✅ Duration

A longer duration is recommended for loading images, and a shorter duration is recommended for transitions.

✅ Animation

Add a small position shift to loading images.

(Source)

Comparison with similar components

| Feature | mui-image | material-ui-image | | ----------------------------- | :------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------: | | Size (minzipped) | npm bundle size | npm bundle size | | Supports MUI v5 | ✅ | ❌ | | Fade-in | ✅ | ✅ | | Progressive level adjustments | ✅ | ❌ | | Suggested duration | ✅ | ✅ | | Optional shift animation | ✅ | ❌ | | Supports legacy MUI versions | ❌ | ✅ |

License

© benmneb

ISC License

Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.