# sito-image
> Image with shimmer loader
Latest version **0.13.2** (published 2023-01-08) · MIT license · 0 weekly downloads
## Install
```sh
npm install sito-image
pnpm add sito-image
yarn add sito-image
bun add sito-image
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.13.2 |
| Published | 2023-01-08 |
| First published | 2022-06-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 13 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | SitoNimbus |
| Maintainers | sito8943 |
| Keywords | image, react, shimmer, @emotion |
## Links
- npm: https://www.npmjs.com/package/sito-image
- Repository: https://github.com/SitoNumbis/sito-image
- Homepage: https://github.com/SitoNumbis/sito-image#readme
- Issues: https://github.com/SitoNumbis/sito-image/issues
- npm.io page: https://npm.io/package/sito-image
## Dependencies (4)
- [react](https://npm.io/package/react.md) ^18.1.0
- [react-dom](https://npm.io/package/react-dom.md) ^18.1.0
- [@emotion/css](https://npm.io/package/@emotion/css.md) ^11.9.0
- [react-scripts](https://npm.io/package/react-scripts.md) 5.0.1
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 0.13.2 (latest) — 2023-01-08
- 0.13.1 — 2022-10-10
- 0.12.2 — 2022-10-08
- 0.12.1 — 2022-10-08
- 0.11.5 — 2022-10-05
- 0.11.4 — 2022-10-05
- 0.11.3 — 2022-10-05
- 0.10.2 — 2022-10-05
- 0.9.1 — 2022-10-05
- 0.8.4 — 2022-10-05
- 0.7.3 — 2022-10-05
- 0.7.2 — 2022-10-05
- 0.6.1 — 2022-10-05
- 0.5.4 — 2022-10-05
- 0.4.1 — 2022-10-03
- … 13 more at https://npm.io/package/sito-image/versions
## 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 {
}
}
```
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 {
}
}
```
Yo can add your css rules, like `sx` prop for [styled-component](https://emotion.sh/docs/introduction), `style` prop like inline css styles and classNames from your css files
```
import Image as Container from "sito-image";
function App() {
return {
}
}
```
## 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\| 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\| object
\| bool>
\| func
\| object | | inline css |
| extraProps | Array\| 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 🙌
---
_Source: https://npm.io/package/sito-image · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._