docs: improve alert loop demo (#32488)

* docs: improve alert loop demo

- react-text-loop => react-text-loop-next
- adding demo of react-fast-marquee

* update snapshot

components/alert/__tests__/__snapshots__/demo.test.ts.snap

@@ -1323,55 +1323,89 @@ Array [
 `;
 
 exports[`renders ./components/alert/demo/loop-banner.md correctly 1`] = `
-<div
+Array [
-  class="ant-alert ant-alert-warning ant-alert-banner"
-  data-show="true"
-  role="alert"
->
-  <span
-    aria-label="exclamation-circle"
-    class="anticon anticon-exclamation-circle ant-alert-icon"
-    role="img"
-  >
-    <svg
-      aria-hidden="true"
-      data-icon="exclamation-circle"
-      fill="currentColor"
-      focusable="false"
-      height="1em"
-      viewBox="64 64 896 896"
-      width="1em"
-    >
-      <path
-        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-      />
-    </svg>
-  </span>
   <div
-    class="ant-alert-content"
+    class="ant-alert ant-alert-warning ant-alert-banner"
+    data-show="true"
+    role="alert"
   >
+    <span
+      aria-label="exclamation-circle"
+      class="anticon anticon-exclamation-circle ant-alert-icon"
+      role="img"
+    >
+      <svg
+        aria-hidden="true"
+        data-icon="exclamation-circle"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+        />
+      </svg>
+    </span>
     <div
-      class="ant-alert-message"
+      class="ant-alert-content"
     >
       <div
-        class="x0 x1 x2 x3 "
+        class="ant-alert-message"
       >
         <div
-          style="transition:width 150ms linear;height:auto;width:auto"
+          class="x0 x1 x2 x3 "
         >
           <div
-            class="x1 x4 x5 x6"
+            style="transition:width 150ms linear;height:auto;width:auto"
-            style="opacity:1;transform:translateY(0px);position:relative"
           >
-            <div>
+            <div
-              Notice message one
+              class="x1 x4 x5 x6"
+              style="opacity:1;transform:translateY(0px);position:relative"
+            >
+              <div>
+                Notice message one
+              </div>
             </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
+  </div>,
-</div>
+  <div
+    class="ant-alert ant-alert-warning ant-alert-banner"
+    data-show="true"
+    role="alert"
+  >
+    <span
+      aria-label="exclamation-circle"
+      class="anticon anticon-exclamation-circle ant-alert-icon"
+      role="img"
+    >
+      <svg
+        aria-hidden="true"
+        data-icon="exclamation-circle"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+        />
+      </svg>
+    </span>
+    <div
+      class="ant-alert-content"
+    >
+      <div
+        class="ant-alert-message"
+      />
+    </div>
+  </div>,
+]
 `;
 
 exports[`renders ./components/alert/demo/smooth-closed.md correctly 1`] = `

components/alert/demo/loop-banner.md

@@ -7,28 +7,39 @@ title:
 
 ## zh-CN
 
-配合 [react-text-loop](https://npmjs.com/package/react-text-loop) 实现消息轮播通知栏。
+配合 [react-text-loop-next](https://npmjs.com/package/react-text-loop-next) 或 [react-fast-marquee](https://npmjs.com/package/react-fast-marquee) 实现消息轮播通知栏。
 
 ## en-US
 
-Show a loop banner by using with [react-text-loop](https://npmjs.com/package/react-text-loop).
+Show a loop banner by using with [react-text-loop-next](https://npmjs.com/package/react-text-loop-next) or [react-fast-marquee](https://npmjs.com/package/react-fast-marquee).
 
 ```tsx
 import { Alert } from 'antd';
-import TextLoop from 'react-text-loop';
+import { TextLoop } from 'react-text-loop-next';
+import Marquee from 'react-fast-marquee';
 
 ReactDOM.render(
-  <Alert
+  <>
-    banner
+    <Alert
-    message={
+      banner
-      <TextLoop mask>
+      message={
-        <div>Notice message one</div>
+        <TextLoop mask>
-        <div>Notice message two</div>
+          <div>Notice message one</div>
-        <div>Notice message three</div>
+          <div>Notice message two</div>
-        <div>Notice message four</div>
+          <div>Notice message three</div>
-      </TextLoop>
+          <div>Notice message four</div>
-    }
+        </TextLoop>
-  />,
+      }
+    />
+    <Alert
+      banner
+      message={
+        <Marquee pauseOnHover gradient={false}>
+          I can be a React component, multiple React components, or just some text.
+        </Marquee>
+      }
+    />
+  </>,
   mountNode,
 );
 ```

docs/react/recommendation.en-US.md

@@ -35,7 +35,7 @@ title: Third-Party Libraries
 | Image Crop | [antd-img-crop](https://github.com/nanxiaobei/antd-img-crop) [react-image-crop](https://github.com/DominicTobias/react-image-crop) |
 | Trend Lines | [react-sparklines](https://github.com/borisyankov/react-sparklines) |
 | Keywords highlight | [react-highlight-words](https://github.com/bvaughn/react-highlight-words) |
-| Text Loop | [react-text-loop](https://github.com/braposo/react-text-loop) |
+| Text Loop | [react-text-loop-next](https://github.com/samarmohan/react-text-loop-next) [react-fast-marquee](https://github.com/justin-chu/react-fast-marquee) |
 | Animation | [react-move](https://github.com/react-tools/react-move) [Ant Motion](https://motion.ant.design/components/tween-one) [react-spring](https://www.react-spring.io) |
 | Page Footer | [rc-footer](https://github.com/react-component/footer) |
 | Water Mark | [WaterMark](https://procomponents.ant.design/components/water-mark) |

docs/react/recommendation.zh-CN.md

@@ -35,7 +35,7 @@ title: 社区精选组件
 | 图片裁切 | [antd-img-crop](https://github.com/nanxiaobei/antd-img-crop) [react-image-crop](https://github.com/DominicTobias/react-image-crop) |
 | 趋势线 | [react-sparklines](https://github.com/borisyankov/react-sparklines) |
 | 关键字高亮 | [react-highlight-words](https://github.com/bvaughn/react-highlight-words) |
-| 文字轮播 | [react-text-loop](https://github.com/braposo/react-text-loop) |
+| 文字轮播 | [react-text-loop-next](https://github.com/samarmohan/react-text-loop-next) [react-fast-marquee](https://github.com/justin-chu/react-fast-marquee) |
 | 动画 | [react-move](https://github.com/react-tools/react-move) [Ant Motion](https://motion.ant.design/components/tween-one) [react-spring](https://www.react-spring.io) |
 | 页脚 | [rc-footer](https://github.com/react-component/footer) |
 | 水印 | [WaterMark](https://procomponents.ant.design/components/water-mark) |

package.json

@@ -247,6 +247,7 @@
     "react-dnd-html5-backend": "^14.0.0",
     "react-dom": "^17.0.1",
     "react-draggable": "^4.4.3",
+    "react-fast-marquee": "^1.2.1",
     "react-github-button": "^0.1.11",
     "react-helmet-async": "~1.1.2",
     "react-highlight-words": "^0.17.0",
@@ -257,7 +258,7 @@
     "react-sortable-hoc": "^2.0.0",
     "react-sticky": "^6.0.3",
     "react-test-renderer": "^17.0.1",
-    "react-text-loop": "^2.3.0",
+    "react-text-loop-next": "0.0.3",
     "react-virtualized": "^9.22.0",
     "react-window": "^1.8.5",
     "remark": "^14.0.1",