sito-image
v0.13.2
Published
Image with shimmer loader
Downloads
60
Readme
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 thesrc 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 | |
🙌 Good luck out there my friend 🙌