feat(PageItem): implement "as" property (#6754)

react-bootstrap · Jan 17, 2024 · 430b0c9 · 430b0c9
1 parent 8518c68
commit 430b0c9
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/src/PageItem.tsx b/src/PageItem.tsx
@@ -52,11 +52,12 @@ const PageItem: BsPrefixRefForwardingComponent<'li', PageItemProps> =
         children,
         linkStyle,
         linkClassName,
+        as = Anchor,
         ...props
       }: PageItemProps,
       ref,
     ) => {
-      const Component = active || disabled ? 'span' : Anchor;
+      const Component = active || disabled ? 'span' : as;
       return (
         <li
           ref={ref}

diff --git a/test/PageItemSpec.tsx b/test/PageItemSpec.tsx
@@ -67,5 +67,17 @@ describe('<PageItem>', () => {
 
       pageItemInnerElem.getAttribute('style')!.should.equal('color: red;');
     });
+
+    it('should support custom anchor element', () => {
+      const Component = ({ children, ...props }) => (
+        <a {...props} data-anchor="custom">
+          {children}
+        </a>
+      );
+      const { container } = render(<PageItem as={Component} />);
+      const pageItemElem = container.firstElementChild!;
+      const pageItemInnerElem = pageItemElem.firstElementChild!;
+      pageItemInnerElem.getAttribute('data-anchor')!.should.equal('custom');
+    });
   });
 });