@miroed/react-show-hide v1.0.1

@miroed/react-show-hide

Simple react component for conditionally showing or hiding components.

Table of Contents

• Installation
• Usage
• Components
• Properties

Installation

npm install react-show-hide@next --save

react-show-hide requires React 16.8.0 or later.

Usage

import React from "react"
import { Show, Hide } from "@miroed/react-show-hide";
import MyComponent from './components/MyComponent';

function App(props) {
  return (
      <Show when={true}>
        <MyComponent />
      </Show>
      <Hide when={true}>
        <MyComponent alt={true} />
      </Hide>
  );
}

Components

Properties

when

Condition to be met. Needs to result in a truthy or falsy statement.

<Show when={value.length > 0}>I feel seen 🙌!</Show>

In vanilla JS, doing the following works great:

if (value.length) return "I feel seen 🙌!";

Doing the same thing using the Logical && Operator, you're returning a falsy expression and will cause the component after && to be skipped. In the example below, 0 will be returned by the render method.

{
  value.length && <MyComponent />;
}

We catch that for you:

<Show when={value.length}>I feel seen 🙌!</Show> // result: I feel seen 🙌!

after

<Show when={value.length} after={600}>I feel seen 🙌!</Show> // shown in 0.6s seconds after condition met
<Hide when={value.length} after={60000}>Gone after 60 seconds 🏎!</Hide> // gone in 60 seconds after condition met

Controls the delay on showing the component.