sito-image
Image with shimmer loader
What is a shimmer?
A powerful, customizable, Suspense-like component that (optionally) simulates a shimmer effect while loading.
How to use it?
import SitoImage from "sito-image";
function App() {
return {
<SitoImage src="https://source.unsplash.com/random/800x600" alt="shimmer-example" />
}
}
You can change the name of the container, if you don't like its name
import Image as Container from "sito-image";
function App() {
return {
<Image src="https://source.unsplash.com/random/800x600" alt="shimmer-example" />
}
}
Yo can add your css rules, like sx
prop for styled-component, style
prop like inline css styles and classNames from your css files
import Image as Container from "sito-image";
function App() {
return {
<Image
sx={{ width: "350px", height: "350px" }}
src="https://source.unsplash.com/random/800x600"
alt="shimmer-example"
/>
}
}
Props
Name | Type | Default | Description | |
---|---|---|---|---|
id | string | html identifier | ||
name | string | html name | ||
className | string | css class name | ||
src | string | source image | ||
error | node | component to show when something goes wrong | ||
loadingComponent | node | shimmer | component to show while image is loading | |
alt | string | "no-image" | The required alt attribute specifies an alternate text for an image, if the image cannot be displayed. The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader). Tip: To create a tooltip for an image, use the title attribute! |
|
sx | Array<func | object | bool> | func | object |
The system prop that allows defining system overrides as well as additional CSS styles. See the sx page for more details. |
||
style | Array<func | object | bool> | func | object |
inline css | ||
extraProps | Array<func | object | bool> | func | object |
extra props like: onClick, onMouseEnter, etc | ||
onLoad | function | functions to handle when the image is loaded | ||
onError | function | functions to handle when the image could not be loaded |