feat: add <If> component.

Author: jaywcjlove

README.md

@@ -21,6 +21,36 @@ import Only from '@uiw/react-only-when'
 </Only>
 ```
 
+## \<If>
+
+React component that renders the children if the `condition` prop is `true`.
+
+```jsx
+import { If } from '@uiw/react-only-when';
+
+<div>
+  <If
+    condition={props.error}
+    render={() => (
+      <h1>{props.error}</h1>
+    )}
+  />
+  <If condition={props.error}>
+    <h1>{props.error}</h1>
+  </If>
+</div>
+```
+
+Or you could just use plain JavaScript:
+
+```jsx
+<div>
+  {props.error && (
+    <h1>{props.error}</h1>
+  )}
+</div>
+```
+
 ## Example
 
 ```jsx

src/If.tsx

@@ -0,0 +1,9 @@
+import { ReactElement } from "react";
+import { FC, PropsWithChildren } from "react";
+
+export interface IfProps {
+  readonly condition?: boolean;
+  readonly render?: () => ReactElement;
+}
+
+export const If: FC<PropsWithChildren<IfProps>> = (props) => props.condition ? (props.render ? props.render() : props.children as ReactElement) : null;

src/__test__/index.test.tsx

@@ -1,6 +1,47 @@
 /* eslint-disable jest/no-conditional-expect */
 import TestRenderer from 'react-test-renderer';
 import Only from '../';
+import { If } from '../';
+
+describe('<If />', () => {
+
+  it('Not rendering children', () => {
+    const component = TestRenderer.create(
+      <If condition={false}>
+        <span id="child" />
+      </If>,
+    );
+    let only = component.toJSON();
+    expect(only).toBeNull();
+  });
+
+  it('rendering children', () => {
+    const component = TestRenderer.create(
+      <If condition={true}>
+        <span id="child" />
+      </If>,
+    );
+    let only = component.toJSON();
+
+    if (only && !Array.isArray(only)) {
+      expect(only.type).toEqual('span');
+      expect(only.props.id).toEqual('child');
+    }
+  });
+
+  it('render props', () => {
+    const component = TestRenderer.create(
+      <If condition={true} render={() => <span id="child" />} />,
+    );
+    let only = component.toJSON();
+
+    if (only && !Array.isArray(only)) {
+      expect(only.type).toEqual('span');
+      expect(only.props.id).toEqual('child');
+    }
+  });
+
+})
 
 describe('<Only />', () => {
   it('Not rendering children', () => {

src/index.tsx

@@ -1,4 +1,7 @@
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
+import { If } from './If';
+
+export * from './If';
 
 export interface OnlyWhenProps {
   /** A single child element */
@@ -17,7 +20,7 @@ export interface OnlyWhenProps {
   hiddenMode?: 'null' | 'display' | 'visibility' | 'css';
 }
 
-export default function OnlyWhen(props: OnlyWhenProps) {
+export default function OnlyWhen(props: PropsWithChildren<OnlyWhenProps>) {
   const { children, when, hiddenMode, className } = props;
   const singleChild = React.Children.only(children);
   const { style, ...restOfChildProps } = singleChild.props;
@@ -36,7 +39,7 @@ export default function OnlyWhen(props: OnlyWhenProps) {
     }
   }
   const cloned = React.cloneElement(singleChild, extendedProps);
-  const toHide = keepNode ? cloned : null;
+  const toHide = <If condition={keepNode}>{cloned}</If>;
 
   return when ? singleChild : toHide;
 }