useShowUp

A tiny opinionated React hook for popping up stuff with zero fuss.

Example

import { useShowUp, type ShowUpComponent } from 'use-show-up';

interface ShowUpElementProps {
  title: string;
}

const ShowUpElement: ShowUpComponent<ShowUpElementProps> = ({ title, hide }) => (
  <div>
    <h1>Title is "{title}"</p>

    <p>My content</p>

    <button onClick={hide}>
      Сlose me
    </button>
  </div>
);

const Component = () => {
  const [Element, show, hide] = useShowUp(ShowUpElement, {
    showOnRender: true,
    // list of all options see below
  });

  return (
    <main>
      <Element {...{
        title: 'My demo',
      }} />

      <button onClick={() => show()}>Show</button>
      <button onClick={() => hide()}>Hide</button>
    </main>
  )
};

const App = () => {
  <UseShowUpProvider
    // Place to render all ShowUpElements. Probably somewhere in <body>
    // Could be valid CSS selector, HTMLElement or RefObject
    mountPointSelector='#showUps'
  >
    <Component>
  </UseShowUpProvider>
};

// and somewhere in index.html

<div id="showUps"></div>

More detailed examples available in /examples directory.

Setup

npm install use-show-up

or

yarn add use-show-up

or

pnpm add use-show-up

Usage

This library contains two necessary React components:

• UseShowUpProvider [optional] component
• useShowUp hook

useShowUp

Hook should be placed in the functional component. All passed props overrides Provider props if Provider exists.

API

const [Element, show, hide, toggle] = useShowUp(MyComponent, {
  layout: ({ children }) => <>{ children }</>,
  className: "my-show-up-element",
  hideOnPressEscButton: true,
  hideOnPressOutside: true,
  showOnRender: false,
  focusFirstElementOnRender: false,
  handleHide: () => { console.log('hide'); },
  handleShow: () => { console.log('hide'); },
  mountPoint: myContainerRef // '#myContainer' or document.getElementById('myContainer'),
});

• <Element />

Element must be inserted into your component

• show() Partial<ShowUpElementProps> or undefined. Default undefined

Showing up <Element />. Possible to pass part of full prop list of MyComponent as argument. E.g: show({ some: 'thing' }).

• hide()

Hide rendered <Element />

• toggle() Partial<ShowUpElementProps> or undefined. Default undefined

Show and hide in one function. Same as show, possible to pass part of full prop list of MyComponent as argument

• mountPoint string or ref or HTMLElement. Default ''

Place to render current <Element />

• layout ShowUpLayout or null. Default null

Sometimes might be useful to separate layout and content. See example here

• className string. Default ''

Pass extra css classname to <Element /> container

• hideOnPressEscButton boolean. Default: true

Same as hide() method but by the key press

• hideOnPressOutside boolean. Default: true

Same as hide() method but by clicking outside of the <Layout />

• showOnRender boolean. Default: false

Show <Element /> once the parent component has been rendered

• focusFirstElementOnRender boolean. Default: false

Set focus to the first element in <Element /> could possible be focused

• handleHide function or null. Default null

Run your callback on hide()

• handleShow function or null. Default null

Run your callback on show()

UseShowUpProvider

Provider is optional and can be set anywhere you want. All child uses of useShowUp hook will inherit options from UseShowUpProvider. Unless it overridden in place.

API

<UseShowUpProvider
  mountPoint='#myContainer'
  hideOnPressEscButton={true}
  hideOnPressOutside={true}
  showOnRender={false}
  focusFirstElementOnRender={false}
  handleHide={() => { console.log('hide'); }}
  handleShow={() => { console.log('show'); }}
  layout={({ children }) => <>{ children }</> }
  className="my-show-up-element"
>
  ...
</UseShowUpProvider>

Examples

• Next.js