update type definitions to not restrict the type of children props

Author: EmilianoSanchez

CHANGES.txt

@@ -1,4 +1,5 @@
-1.9.1 (September XX, 2023)
+1.9.1 (October XX, 2023)
+ - Updated type definitions of the library components to not restrict the type of the `children` prop to ReactElement, allowing to pass any valid ReactNode value (Related to issue https://github.com/splitio/react-client/issues/164).
  - Updated linter and other dependencies for vulnerability fixes.
 
 1.9.0 (July 18, 2023)

src/types.ts

@@ -1,4 +1,5 @@
 import SplitIO from '@splitsoftware/splitio/types/splitio';
+import type { ReactNode } from 'react';
 
 /**
  * Split Status interface. It represents the current readiness state of the SDK.
@@ -124,7 +125,7 @@ export interface ISplitFactoryProps extends IUpdateProps {
   /**
    * Children of the SplitFactory component. It can be a functional component (child as a function) or a React element.
    */
-  children: ((props: ISplitFactoryChildProps) => JSX.Element | null) | JSX.Element | null;
+  children: ((props: ISplitFactoryChildProps) => ReactNode) | ReactNode;
 }
 
 /**
@@ -159,7 +160,7 @@ export interface ISplitClientProps extends IUpdateProps {
   /**
    * Children of the SplitFactory component. It can be a functional component (child as a function) or a React element.
    */
-  children: ((props: ISplitClientChildProps) => JSX.Element | null) | JSX.Element | null;
+  children: ((props: ISplitClientChildProps) => ReactNode) | ReactNode;
 }
 
 /**
@@ -197,5 +198,5 @@ export interface ISplitTreatmentsProps {
   /**
    * Children of the SplitTreatments component. It must be a functional component (child as a function) you want to show.
    */
-  children: ((props: ISplitTreatmentsChildProps) => JSX.Element | null);
+  children: ((props: ISplitTreatmentsChildProps) => ReactNode);
 }

types/types.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import SplitIO from '@splitsoftware/splitio/types/splitio';
+import type { ReactNode } from 'react';
 /**
  * Split Status interface. It represents the current readiness state of the SDK.
  */
@@ -103,7 +103,7 @@ export interface ISplitFactoryProps extends IUpdateProps {
     /**
      * Children of the SplitFactory component. It can be a functional component (child as a function) or a React element.
      */
-    children: ((props: ISplitFactoryChildProps) => JSX.Element | null) | JSX.Element | null;
+    children: ((props: ISplitFactoryChildProps) => ReactNode) | ReactNode;
 }
 /**
  * SplitClient Child Props interface. These are the props that the child component receives from the 'SplitClient' component.
@@ -131,7 +131,7 @@ export interface ISplitClientProps extends IUpdateProps {
     /**
      * Children of the SplitFactory component. It can be a functional component (child as a function) or a React element.
      */
-    children: ((props: ISplitClientChildProps) => JSX.Element | null) | JSX.Element | null;
+    children: ((props: ISplitClientChildProps) => ReactNode) | ReactNode;
 }
 /**
  * SplitTreatments Child Props interface. These are the props that the child component receives from the 'SplitTreatments' component.
@@ -163,6 +163,6 @@ export interface ISplitTreatmentsProps {
     /**
      * Children of the SplitTreatments component. It must be a functional component (child as a function) you want to show.
      */
-    children: ((props: ISplitTreatmentsChildProps) => JSX.Element | null);
+    children: ((props: ISplitTreatmentsChildProps) => ReactNode);
 }
 export {};