Is it possible to conditionally render only the component?

I’m using tippyjs/react. Sometimes I only wish to render my component, and not the tooltip as well.

My solution seems like a bit of an anti-pattern:

{window.myVariable && <SomeComponent/>}
{!window.myVariable &&
<Tippy content={<div>hi</div>}>
    <SomeComponent/>
</Tippy>
}

I’m looking for something like an attribute I can attach to Tippy e.g.

<Tippy showTip={!window.myVariable} content={<div>hi</div>}>
    <SomeComponent/>
</Tippy>

Thanks

[atomiks]

Yeah there’s a few ways:

1. Conditional rendering as you’re doing currently

{window.myVariable ? (
  <SomeComponent />
) : (
  <Tippy content="Tooltip">
    <SomeComponent />
  </Tippy>
)}

1. Return false in onShow if you don’t want to show it

const onShow = () => !window.myVariable

<Tippy onShow={onShow}>
  <SomeComponent />
</Tippy>

1. Call .enable() / .disable() imperatively on the instance

I think there should be React-specific props for this however: like isEnabled which is part of the state object. Maybe isVisible, too

[atomiks]

@tippy.js/react@2 is dependent on tippy.js@4 (v4 major) Also, there were breaking changes in v2 obviously, you can read the release notes to find out