feat: add img alt (#9)

* feat: add img alt

* docs

Author: xrkffgg

.github/PULL_REQUEST_TEMPLATE.md

@@ -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

README.md

@@ -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
@@ -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
 

docs/changelog.md

@@ -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`

src/image-shadow.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 
 interface ImageShadowProps {
+  alt?: string;
   className?: string;
   shadowBlur?: number;
   shadowHover?: boolean;
@@ -15,6 +16,7 @@ export { ImageShadowProps };
 
 const ImageShadow = (props: ImageShadowProps) => {
   const {
+    alt,
     className,
     shadowBlur = 20,
     shadowHover = false,
@@ -39,6 +41,7 @@ const ImageShadow = (props: ImageShadowProps) => {
       <img
         className="react-image-shadow-img"
         src={src}
+        alt={alt}
         width={width}
         style={{
           borderRadius: `${shadowRadius}px`,

tests/index.spec.tsx

@@ -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');
+  });
 });