Skip to content

A simple React component for wrapping children based on a condition

Notifications You must be signed in to change notification settings

sizzyapp/conditional-wrap

Repository files navigation

🙋‍♂️ 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'));

About

A simple React component for wrapping children based on a condition

Resources

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •