🌈 react-image-dangling

A React image component. Dangling interaction effect.

      

📚 Example

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

🌀 Template

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

📦 Install

``bash
npm i react-image-dangling


or


yarn add react-image-dangling
`

🎉 Usage

`js
import ImageDangling from 'react-image-dangling';
import 'react-image-dangling/assets/index.css';

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

export default () => (
<>


);
`

📔 API

| Property | Description | Type | Required | Default | Version |
| ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | -------- | ------- | ------- |
| alt | The alt of the image. | string | ✖ | - | 1.0.0 |
| blendMode | Whether to enable mix-blend-mode.
When set true, the default is soft-light. More see mix-blend-mode. | boolean \| string | ✖ | false | 1.0.0 |
| className | Component extra class. | string | ✖ | - | 1.0.0 |
| hoverScale | The hover scale of the image. Require >= 1 && <=5. | number | ✖ | 1.6 | 1.0.0 |
| hoverSlope | The hover slope of the image. Require >= 10 && <=90. | number | ✖ | 60 | 1.0.0 |
| shadeColor | To set the mixed background color when use blendMode. | string | ✖ | #000 | 1.0.0 |
| radius | The border radius of the component. | 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