feat: updates ReactIf component to support else and NULL condition (#27)

Author: pavankjadda

apps/react-kit-demo/src/app/all-books/AllBooks.tsx

@@ -1,4 +1,4 @@
-import { Grid, Paper } from '@mui/material';
+import { Divider, Grid, Paper } from '@mui/material';
 import { DataGrid, GridCellParams, GridColDef } from '@mui/x-data-grid';
 import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
@@ -23,23 +23,27 @@ export default function AllBooks() {
 	}, []);
 
 	return (
-		<Grid container style={{ height: 'auto', width: '100%', textAlign: 'center' }}>
-			<Grid item xs={12}>
-				<h2>All Books</h2>
+		<Grid container sx={{ m: 3 }}>
+			<Grid size={10} sx={{ flexGrow: 1 }}>
+				<h2 style={{ textAlign: 'center' }}>Books Demo</h2>
+				<Divider sx={{ mb: 4 }} />
 
-				<Paper elevation={24} style={{ marginTop: '2rem', display: 'flex', justifyContent: 'center' }}>
-					<DataGrid
-						initialState={{ pagination: { paginationModel: { pageSize: 5 } } }}
-						getRowId={(row) => row.id}
-						pageSizeOptions={[5, 10, 20, 50, 100]}
-						disableRowSelectionOnClick={true}
-						density={'comfortable'}
-						loading={loading}
-						rows={data ?? []}
-						columns={columns}
-						autoHeight={true}
-					/>
+				<Paper elevation={24}>
+					<div style={{ display: 'flex', flexDirection: 'column' }}>
+						<DataGrid
+							initialState={{ pagination: { paginationModel: { pageSize: 5 } } }}
+							getRowId={(row) => row.id}
+							pageSizeOptions={[5, 10, 20, 50, 100]}
+							disableRowSelectionOnClick={true}
+							density={'comfortable'}
+							loading={loading}
+							rows={data ?? []}
+							columns={columns}
+						/>
+					</div>
 				</Paper>
+
+				<Divider sx={{ mb: 3 }} />
 			</Grid>
 		</Grid>
 	);

apps/react-kit-demo/src/app/app.tsx

@@ -12,6 +12,7 @@ export default function App() {
 					<Link to="/dialog">Dialog</Link> <br />
 					<Link to="/circular-progress">Circular Progress</Link> <br />
 					<Link to="/books">All Books</Link> <br />
+					<Link to="/react-if">React If Demo</Link> <br />
 				</ul>
 			</div>
 

apps/react-kit-demo/src/app/buttons/ButtonsDemo.tsx

@@ -9,11 +9,14 @@ import {
 	SuccessButton,
 } from '@react-kit/react-kit';
 import { useNavigate } from 'react-router-dom';
+import { Divider } from '@mui/material';
 
 export default function ButtonsDemo() {
 	const navigate = useNavigate();
 	return (
 		<div style={{ marginInline: '1rem', textAlign: 'center' }}>
+			<h2>Buttons Demo</h2>
+			<Divider sx={{ mb: 3 }} />
 			Cancel Button:
 			<CancelButton onClick={() => console.log('Clicked Cancel Button')} name={'Cancel'}></CancelButton> <br />
 			Delete Button:

apps/react-kit-demo/src/app/react-if/ReactIfDemo.tsx

@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+import { DismissibleAlert, ManageButton, ReactIf } from '@react-kit/react-kit';
+import { Card, Divider } from '@mui/material';
+
+export default function ReactIfDemo() {
+	const [show, setShow] = useState(true);
+
+	return (
+		<div style={{ textAlign: 'center' }}>
+			<h2>React If Demo</h2>
+
+			<Divider sx={{ mb: 3 }} />
+			<ManageButton startIcon={''} onClick={() => setShow((prev) => !prev)}>
+				Click to toggle
+			</ManageButton>
+
+			<Card sx={{ m: 5, mb: 5 }} elevation={24}>
+				{/* Section 1: ReactIf with only condition */}
+				<div style={{ marginTop: 32 }}>
+					<h3>
+						1. ReactIf with <code>condition</code> only
+					</h3>
+					<ReactIf condition={show}>
+						<DismissibleAlert message={'Main content (condition is true)'} severity={'success'} dismissOnTimeOut={false} />
+					</ReactIf>
+				</div>
+			</Card>
+
+			<Card sx={{ m: 3 }} elevation={24}>
+				{/* Section 2: ReactIf with condition and else */}
+				<div style={{ marginTop: 32 }}>
+					<h3>
+						2. ReactIf with <code>condition</code> and <code>else</code>
+					</h3>
+					<ReactIf
+						condition={show}
+						else={<DismissibleAlert message={'Else content (condition is false)'} severity={'warning'} dismissOnTimeOut={false} />}>
+						<DismissibleAlert message={'Main content (condition is true)'} severity={'success'} dismissOnTimeOut={false} />
+					</ReactIf>
+				</div>
+			</Card>
+		</div>
+	);
+}

apps/react-kit-demo/src/routes/Routes.tsx

@@ -6,6 +6,7 @@ import DialogDemo from '../app/dialog/DialogDemo';
 import CenterCircularProgressDemo from '../app/progress-bar/CenterCircularProgressDemo';
 import AllBooks from '../app/all-books/AllBooks';
 import App from '../app/app';
+import ReactIfDemo from '../app/react-if/ReactIfDemo';
 
 export const router = createBrowserRouter([
 	{
@@ -40,6 +41,10 @@ export const router = createBrowserRouter([
 				path: '/books',
 				element: <AllBooks />,
 			},
+			{
+				path: '/react-if',
+				element: <ReactIfDemo />,
+			},
 		],
 	},
 ]);

pnpm-lock.yaml

@@ -17,7 +17,7 @@ type DismissibleAlertProps = {
 	dismissTimeOut?: number;
 };
 
-export function DismissibleAlert(props: DismissibleAlertProps) {
+export function DismissibleAlert(props: Readonly<DismissibleAlertProps>) {
 	const [open, setOpen] = useState(true);
 	const [dismissible] = useState(props.dismissible ?? true);
 	const [dismissOnTimeOut] = useState(props.dismissOnTimeOut ?? true);

react-kit/src/lib/components/DismissibleAlert.tsx

@@ -1,13 +1,53 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
+
+type ReactIfProps = {
+	/**
+	 * The condition that determines whether children should be rendered
+	 */
+	condition: boolean | null | undefined;
+
+	/**
+	 * Content to render when condition is true.
+	 * Can be either a ReactNode or a function returning a ReactNode
+	 */
+	children: ReactNode | (() => ReactNode);
+
+	/**
+	 * Optional content to render when condition is false
+	 */
+	else?: ReactNode | (() => ReactNode);
+};
 
 /**
  * Reusable If component, that renders content if the condition is true. Similar to *ngIf from Angular
  *
- * @param props Properties of the React Node
+ * @param props Properties of the component
  *
+ * @example
+ * ```tsx
+ * <ReactIf condition={isVisible}>
+ *   <div>Visible content</div>
+ * </ReactIf>
+ *
+ * <ReactIf condition={isVisible} else={<div>Alternative content</div>}>
+ *   <div>Main content</div>
+ * </ReactIf>
+ *```
  * @author Pavan Kumar Jadda
  * @since 0.1.0
  */
-export function ReactIf(props: { condition: boolean | undefined; children: React.ReactNode }): React.ReactNode {
-	return props.condition === undefined || !props.condition ? null : props.children;
+export function ReactIf(props: ReactIfProps): React.ReactNode {
+	const { condition, children, else: elseContent } = props;
+
+	// Check if condition is true
+	if (condition) {
+		return typeof children === 'function' ? children() : children;
+	}
+
+	// Render else content or null
+	if (elseContent) {
+		return typeof elseContent === 'function' ? elseContent() : elseContent;
+	} else {
+		return null;
+	}
 }