0.1.7 • Published 1 year ago
@stackmeister/react-overlay v0.1.7
@stackmeister/react-overlay
Utility for easily overlaying elements over the whole app in React.
It helps elements deep inside the DOM to break out of it and avoid z-index fuckery when creating modals, dialogs, tooltips, tutorial markers etc.
Create modals and tooltips from wherever you are in your components!
It is using React Portals, some DOM-manipulation, but no CSS. Positioning etc. is up to your app. The OverlayPortal will just help you to break out of the DOM.
Install
// Yarn
yarn add @stackmeister/react-overlay
// NPM
npm i @stackmeister/react-overlay
TypeScript typings are included (No @types/
package needed)
Usage
import { OverlayPortal } from '@stackmeister/react-overlay'
import { useState } from 'react'
import { render } from 'react-dom'
const App = () => {
const [open, setOpen] = useState(false)
return (
<div class="app">
<button type="button" onClick={() => setOpen(true)}>
Open Overlay
</button>
{open && (
<OverlayPortal>
<div className="modal" style={{ position: 'absolute', top: 100, left: 100 }}>
This will overlay everything by default
<button type="button" onClick={() => setOpen(false)}>
Close Overlay
</button>
</div>
</OverlayPortal>
)}
</div>
)
}
render(<App />, rootElement)