one-line React component for conditionally wrapping children

conditionalwrap.js

import React from 'react';

const ConditionalWrap = ({condition, wrap, children}) => condition ? wrap(children) : children;

const Header = ({shouldLinkToHome}) => (
  <div>
    <ConditionalWrap
      condition={shouldLinkToHome}
      wrap={children => <a href="/">{children}</a>}
    >
      <img src="logo.png"/>
    </ConditionalWrap>
  </div>
)

typescript version:

type ConditonalWrapperProps = {
  children: React.ReactElement;
  condition: boolean;
  wrapper: (children: React.ReactElement) => JSX.Element;
};
const ConditonalWrapper: React.FC<ConditonalWrapperProps> = ({ condition, wrapper, children }) =>
  condition ? wrapper(children) : children

@jensbodal thanks but the types are in the package already

an even better api, and the way i use it is:

<Wrap
  if={someCondition}
  with={ch => <View>{ch}</View>}
>
  <Text />
</Wrap>

here we go, nice TS code

import React, { FC } from "react"

interface WrapProps {
  if: boolean
  with: (children: React.ReactNode) => JSX.Element
}

export const Wrap: FC<WrapProps> = ({ if: condition, with: wrapper, children }) => {
  return condition ? wrapper(children) : <>children</>
}

check out https://github.com/kitze/conditional-wrap

@kitze Small question)) For what reasons React.cloneElement is used?

I have an improvement suggestion for this:

import { FC, ReactNode, createElement } from 'react';

interface WrapProps {
	if?: boolean;
	with: typeof createElement.arguments[0];
	wrapperProps: typeof createElement.arguments[1];
	children: NonNullable<ReactNode>;
}

const Wrap: FC<WrapProps> = ({
	if: condition,
	with: wrapper,
	wrapperProps,
	children,
}) =>
	condition ? createElement(wrapper, wrapperProps, [children]) : <>children</>;

export default Wrap;

By using createElement we can use Wrap like so:

<Wrap if={condition} with="a" wrapperProps={{ 'data-testid': 'wrapper' }}>
    <p>Wrapped text</p>
</Wrap>

Instead of always passing a (children) => <jsx /> function.

FYI this function breaks the react/no-unstable-nested-components eslint rule.