A tiny opinionated React hook for popping up stuff with zero fuss.
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.
npm install use-show-up
or
yarn add use-show-up
or
pnpm add use-show-up
This library contains two necessary React components:
- UseShowUpProvider [optional] component
- useShowUp hook
Hook should be placed in the functional component. All passed props overrides Provider props if Provider exists.
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. Defaultundefined
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. Defaultundefined
Show and hide in one function. Same as show, possible to pass part of full prop list of MyComponent as argument
mountPointstring or ref or HTMLElement. Default''
Place to render current <Element />
layoutShowUpLayout or null. Defaultnull
Sometimes might be useful to separate layout and content. See example here
classNamestring. Default''
Pass extra css classname to <Element /> container
hideOnPressEscButtonboolean. Default:true
Same as hide() method but by the key press
hideOnPressOutsideboolean. Default:true
Same as hide() method but by clicking outside of the <Layout />
showOnRenderboolean. Default:false
Show <Element /> once the parent component has been rendered
focusFirstElementOnRenderboolean. Default:false
Set focus to the first element in <Element /> could possible be focused
handleHidefunction or null. Defaultnull
Run your callback on hide()
handleShowfunction or null. Defaultnull
Run your callback on show()
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.
<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>