[REFACTORED] to reduce bundle size

Author: Hardik_B

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dx-kit/react-conditional-match",
-  "version": "2.2.4",
+  "version": "2.2.5",
   "description": "A flexible and reusable React component for conditionally rendering child elements. The component supports options for handling multiple matching children and custom fallbacks, and is lightweight and easy to use. This component can help simplify complex rendering logic in your React application and remove the need for ternary statements and if else blocks.",
   "main": "./dist/index.esm.js",
   "module": "./dist/index.cjs.js",

src/components/ConditionalMatch/ConditionalMatch.tsx

@@ -16,31 +16,17 @@ const ConditionalMatch = ({ fallback, children = null, multiMatch = false }: Con
     const childrenToRender: JSX.Element[] = [];
 
     Children.forEach(children, (child) => {
-      if (child?.type !== Render) {
+      if (child?.type !== Render || (!multiMatch && childrenToRender?.length >= 1) || !child?.props?.when) {
         return;
       }
-
-      if (!multiMatch && childrenToRender?.length >= 1) {
-        return;
-      }
-
-      if (child?.props?.when) {
-        childrenToRender.push(child);
-      }
+      childrenToRender.push(child);
     });
 
     return childrenToRender;
   }, [children, multiMatch]);
 
-  if (matchedChildren?.length) {
-    return <Fragment>{matchedChildren}</Fragment>;
-  }
-
-  return <Fragment>{fallback}</Fragment>;
+  return <Fragment>{matchedChildren?.length ? matchedChildren : fallback}</Fragment>;
 };
 
-const ConditionalMatchCompound = Object.assign(ConditionalMatch, {
-  Render,
-});
-
-export { ConditionalMatchCompound as ConditionalMatch };
+ConditionalMatch.Render = Render;
+export { ConditionalMatch };

src/components/ConditionalMatch/components/Render.tsx

@@ -7,12 +7,5 @@ type RenderProps<T> = {
   children: ReactNode;
 };
 
-function Render<T>({ children, when }: RenderProps<T>): JSX.Element | null {
-  if (!when) {
-    return null;
-  }
-
-  return <Fragment>{children}</Fragment>;
-}
-
-export { Render };
+export const Render = <T,>({ children, when }: RenderProps<T>): JSX.Element | null =>
+  when ? <Fragment>{children}</Fragment> : null;