conditional-wrap

🙋‍♂️ Made by @thekitze

Other projects:

• 🏫 React Academy - Interactive React and GraphQL workshops
• 💌 Twizzy - A standalone app for Twitter DM
• 💻 Sizzy - A tool for testing responsive design on multiple devices at once
• 🤖 JSUI - A powerful UI toolkit for managing JavaScript apps

---

conditional-wrap

A simple React component for wrapping children based on a condition.

Install

yarn add conditional-wrap

Example

Open demo on CodeSandbox

import React from 'react';
import { render } from 'react-dom';
import { Tooltip } from 'react-tippy';

import ConditionalWrap from 'conditional-wrap';

const Button = ({ tooltip, children }) => (
  <ConditionalWrap
    condition={!!tooltip}
    wrap={children => (
      <Tooltip position="bottom" title={tooltip}>
        {children}
      </Tooltip>
    )}
  >
    <button>{children}</button>
  </ConditionalWrap>
);

const Demo = () => (
  <div>
    <Button> Normal button </Button>
    <Button tooltip="Hi there!"> Button with a tooltip! </Button>
  </div>
);

render(<Demo />, document.getElementById('root'));