Skip to content

feat: add img alt #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Dec 15, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions .github/PULL_REQUEST_TEMPLATE.md
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,7 @@ Describe changes from the user side, and list all potential break changes or oth

### ☑️ 请求合并前的自查清单 / Self Check before Merge

⚠️ 请自检并全部**勾选全部选项**。⚠️
⚠️ Please check all items below before review. ⚠️
⚠️ 请自检并全部**勾选全部选项**。/ Please check all items below before review. ⚠️

- [ ] 文档已补充或无须补充 / Doc is updated/provided or not needed
- [ ] 代码演示已提供或无须提供 / Demo is updated/provided or not needed
Expand Down
23 changes: 14 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,10 @@ A React image component. Simple realization of image shadow.

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

## 🌀 Template

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

## 📦 Install

```bash
Expand All @@ -31,15 +35,16 @@ export default () => (

## 📔 API

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

Expand Down
6 changes: 6 additions & 0 deletions docs/changelog.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
# 🗓 Changelog

## 1.1.0

`2020-12-15`

- feat: add img `alt`. [#9](https://github.com/image-component/react-image-shadow/pull/9)

## 1.0.3

`2020-12-10`
Expand Down
3 changes: 3 additions & 0 deletions src/image-shadow.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import * as React from 'react';
import classNames from 'classnames';

interface ImageShadowProps {
alt?: string;
className?: string;
shadowBlur?: number;
shadowHover?: boolean;
Expand All @@ -15,6 +16,7 @@ export { ImageShadowProps };

const ImageShadow = (props: ImageShadowProps) => {
const {
alt,
className,
shadowBlur = 20,
shadowHover = false,
Expand All @@ -39,6 +41,7 @@ const ImageShadow = (props: ImageShadowProps) => {
<img
className="react-image-shadow-img"
src={src}
alt={alt}
width={width}
style={{
borderRadius: `${shadowRadius}px`,
Expand Down
6 changes: 6 additions & 0 deletions tests/index.spec.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -58,4 +58,10 @@ describe('imageShadow', () => {
const node = wrapper.find('.react-image-shadow-img');
expect(node.prop('width')).toEqual(100);
});

it('alt', () => {
const wrapper = mount(<ImageShadow alt="alt" src={testSrc} />);
const node = wrapper.find('.react-image-shadow-img');
expect(node.prop('alt')).toEqual('alt');
});
});