# react-image-shadow

> A React image component. Simple realization of image shadow.

Latest version **1.1.3** (published 2021-01-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-image-shadow
pnpm add react-image-shadow
yarn add react-image-shadow
bun add react-image-shadow
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.3 |
| Published | 2021-01-05 |
| First published | 2020-12-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 12.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 20 |
| Author | xrkffgg |
| Maintainers | xrkffgg |
| Keywords | image, shadow, components, component, react, ui |

## Links

- npm: https://www.npmjs.com/package/react-image-shadow
- Repository: https://github.com/image-component/react-image-shadow
- Homepage: https://image-component.github.io/react-image-shadow/
- Issues: https://github.com/image-component/react-image-shadow/issues
- npm.io page: https://npm.io/package/react-image-shadow

## Dependencies (2)

- [classnames](https://npm.io/package/classnames.md) ^2.2.6
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.12.5

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 1.1.3 (latest) — 2021-01-05
- 1.1.2 — 2020-12-16
- 1.1.1 — 2020-12-15
- 1.1.0 — 2020-12-15
- 1.0.3 — 2020-12-10
- 1.0.2 — 2020-12-08
- 1.0.1 — 2020-12-08
- 1.0.0 — 2020-12-04
- 0.1.2 — 2020-12-04
- 0.1.1 — 2020-12-04
- 0.1.0 — 2020-12-04
- 0.0.2 — 2020-12-04

## README

# 🌈 react-image-shadow

A React image component. Simple realization of image shadow.

[![npm](https://img.shields.io/npm/v/react-image-shadow?style=flat-square&color=orange)](https://www.npmjs.com/package/react-image-shadow) [![dumi](https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square)](https://github.com/umijs/dumi) ![](https://github.com/image-component/react-image-shadow/workflows/ci/badge.svg) ![](https://img.shields.io/github/last-commit/image-component/react-image-shadow/main?color=%23722ed1&style=flat-square) [![codecov](https://codecov.io/gh/image-component/react-image-shadow/branch/main/graph/badge.svg?token=PYD7S8BHOB)](https://codecov.io/gh/image-component/react-image-shadow) ![](https://img.shields.io/npm/dt/react-image-shadow?color=%23eb2f96&style=flat-square) ![](https://img.shields.io/npm/l/react-image-shadow?style=flat-square&color=red)

## 📚 Example

Online: https://image-component.github.io/react-image-shadow/

## 🌀 Template

https://github.com/one-template/react-component-template

## 📦 Install

```bash
npm i react-image-shadow
# or
yarn add react-image-shadow
```

## 🎉 Usage

```js
import ImageShadow from 'react-image-shadow';
import 'react-image-shadow/assets/index.css';

const src =
  'https://github.com/image-component/gallery/blob/main/girl/1.jpg?raw=true';

export default () => (
  <>
    <ImageShadow src={src} />
  </>
);
```

## 📔 API

| Property     | Description                         | Type          | Required | Default | Version |
| ------------ | ----------------------------------- | ------------- | -------- | ------- | ------- |
| alt          | The alt of the image.               | string        | ✖        | -       | 1.1.0   |
| className    | Component extra class.              | string        | ✖        | -       | 1.0.0   |
| shadowBlur   | The shadow blur of the image.       | number        | ✖        | 20      | 1.0.0   |
| shadowHover  | Whether to support the mouse hover. | boolean       | ✖        | false   | 1.0.0   |
| shadowRadius | The border radius of the image.     | number        | ✖        | 8       | 1.0.0   |
| src          | The src of the image.               | string        | ✔        | -       | 1.0.0   |
| style        | Component extra style.              | CSSProperties | ✖        | -       | 1.0.0   |
| width        | The width of the image.             | number        | ✖        | 300     | 1.0.0   |

## 🔨 Development

```
yarn
yarn start
```

## License

[MIT](https://github.com/image-component/react-image-shadow/blob/main/LICENSE)

---
_Source: https://npm.io/package/react-image-shadow · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._