chore: remove ref and additional props from components when as is areact fragment

Author: wilsonadenuga

CHANGELOG.md

@@ -2,11 +2,17 @@
 
 All notable changes to the react-smart-conditional package will be documented in this file.
 
+## [1.0.3] - 2025-03-05
+
+### Fixed
+
+- Excluded `ref` and unsupported props when `as` is a `React.Fragment` to prevent React warnings and errors.
+
 ## [1.0.1] - 2024-09-11
 
 ### Changes
 
-- Updated github link in README.md
+- Updated GitHub link in README.md
 
 ## [1.0.0] - 2024-09-07
 

README.md

@@ -3,7 +3,7 @@
 [![License](https://img.shields.io/github/license/oluwatunmiisheii/react-smart-conditional?logo=github&logoColor=959DA5&labelColor=2D3339)](https://github.com/oluwatunmiisheii/react-smart-conditional/blob/main/LICENSE)
 [![Contact](https://img.shields.io/badge/contact-@__Adenugawilson-blue.svg?style=flat&logo=twitter)](https://x.com/Adenugawilson)
 
-# React Conditional Render
+# React Smart Conditional
 
 A flexible and reusable React component for conditional rendering.
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-smart-conditional",
   "description": "Manage conditional rendering in react js and it's frameworks like a pro",
-  "version": "1.0.21",
+  "version": "1.0.3",
   "source": "src/index.ts",
   "main": "dist/index.js",
   "module": "dist/index.module.js",
@@ -19,7 +19,7 @@
   },
   "sideEffects": false,
   "scripts": {
-    "lint": "eslint '**/*.{js,ts,tsx}'",
+    "lint": "eslint '**/*.{js,ts,tsx}' --ignore-pattern 'dist/'",
     "lint:fix": "pnpm lint --fix",
     "prettier": "prettier --write \"{src,tests,example/src}/**/*.{js,ts,jsx,tsx}\"",
     "build-only": "rm -rf ./dist/*; microbundle build --entry src/index.ts --name react-smart-conditional --tsconfig tsconfig.json",
@@ -35,7 +35,7 @@
     "react",
     "conditional",
     "render",
-    "react-smart-conditional",
+    "conditional-render",
     "react-conditional-render"
   ],
   "author": "Wilson Adenuga <[email protected]>",

src/components/else.tsx

@@ -1,7 +1,14 @@
 import React from 'react';
 import { polymorphicForwardRef } from '../types/polymorphic';
+import { isFragment } from '../utils/is-fragment';
 
-export const Else = polymorphicForwardRef<'div'>(
-  ({ as: Element = 'div', ...props }, ref) => <Element ref={ref} {...props} />,
+export const Else = polymorphicForwardRef<'div', JSX.IntrinsicElements['div']>(
+  ({ as: Element = 'div', ...props }, ref) => {
+    return isFragment(Element) ? (
+      props.children
+    ) : (
+      <Element ref={ref} {...props} />
+    );
+  },
 );
 Else.displayName = 'Else';

src/components/if.tsx

@@ -1,8 +1,17 @@
 import React from 'react';
 import { polymorphicForwardRef } from '../types/polymorphic';
+import { isFragment } from '../utils/is-fragment';
 
-export const If = polymorphicForwardRef<'div', { condition: boolean }>(
-  ({ as: Element = 'div', condition, ...props }, ref) =>
-    condition ? <Element ref={ref} {...props} /> : null,
+export const If = polymorphicForwardRef<
+  'div',
+  JSX.IntrinsicElements['div'] & { condition: boolean }
+>(({ as: Element = 'div', condition, ...props }, ref) =>
+  condition ? (
+    isFragment(Element) ? (
+      props.children
+    ) : (
+      <Element ref={ref} {...props} />
+    )
+  ) : null,
 );
 If.displayName = 'If';

src/components/show.tsx

@@ -2,6 +2,7 @@ import React, { type ReactNode, Children, isValidElement } from 'react';
 import { If } from './if';
 import { Else } from './else';
 import { polymorphicForwardRef } from '../types/polymorphic';
+import { isFragment } from '../utils/is-fragment';
 
 type ConditionalComponent = typeof If | typeof Else;
 
@@ -30,13 +31,18 @@ const Show = polymorphicForwardRef<
     }
   });
 
-  return (
+  const content =
+    trueConditions.length > 0
+      ? multiple
+        ? trueConditions
+        : trueConditions[0]
+      : Otherwise;
+
+  return isFragment(Element) ? (
+    content
+  ) : (
     <Element ref={ref} {...props}>
-      {trueConditions.length > 0
-        ? multiple
-          ? trueConditions
-          : trueConditions[0]
-        : Otherwise}
+      {content}
     </Element>
   );
 });

src/utils/is-fragment.ts

@@ -0,0 +1,4 @@
+import { Fragment } from 'react';
+
+export const isFragment = (Component: React.ElementType) =>
+  Component === Fragment;

test/else/__snapshots__/else.test.tsx.snap

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Else should not pass ref and props when custom component is a Fragment 1`] = `
+<div>
+  Hello
+</div>
+`;
+
+exports[`Else should pass additional props 1`] = `
+<div>
+  <div
+    class="test"
+    id="test"
+  >
+    Hello
+  </div>
+</div>
+`;

test/else/else.test.tsx

@@ -20,4 +20,25 @@ describe('Else', () => {
     render(<Else ref={ref}>Hello</Else>);
     expect(ref.current).toBeInTheDocument();
   });
+
+  it('should pass additional props', () => {
+    const { container } = render(
+      <Else className="test" id="test">
+        Hello
+      </Else>,
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should not pass ref and props when custom component is a Fragment', () => {
+    const ref = React.createRef<HTMLDivElement>();
+
+    const { container } = render(
+      <Else as={React.Fragment} ref={ref}>
+        Hello
+      </Else>,
+    );
+    expect(ref.current).toBeNull();
+    expect(container).toMatchSnapshot();
+  });
 });

test/if/__snapshots__/if.test.tsx.snap

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`If should not pass ref and props when custom component is a Fragment 1`] = `
+<div>
+  Hello
+</div>
+`;
+
+exports[`If should pass additional props 1`] = `
+<div>
+  <div
+    class="test"
+    id="test"
+  >
+    Hello
+  </div>
+</div>
+`;