conditional-wrapper/README.md

A React component with which you can conditionally wrap child components

# Conditional Wrapper component for React

## Reason for this component
Occasionally, you may want to wrap a React component with another component, but only when a certain condition is true. There's no native React component that can do this for you, and many Higher Order Components out there add a ton of options for conditionally rendering a wrapping component.

This component does only one thing: Conditionally wrap a child component with a wrapping component, based on a condition that's passed as a prop.

## Installation
```
npm i conditional-wrapper
```

## Usage
```
import { ConditionalWrapper } from 'conditional-wrapper';

const condition = true; // any truthy or falsy value

<ConditionalWrapper
	condition={condition}
	wrapper={(children) => <div>This is the wrapper component, followed by the children: {children}</div>}>
		<p>This is the child component.</p>
</ConditionalWrapper>
```

## Props

### `condition: boolean`
The `condition` prop takes a `boolean` value that indicates whether the wrapper should be rendered or not.

### `wrapper: (children: JSX.Element | JSX.Element[]) => JSX.Element`
The `wrapper` prop takes a `function` with a parameter that represents the `children` prop of the `<ConditionalWrapper />`. The function returns the wrapping component that should be rendered in case the `condition` prop evaluates to `true`.

### `children: JSX.Element | JSX.Element[]`
The `children` prop represents the direct children of the `<ConditionalWrapper />` component.