4a02dc5a17
**Affected examples** with-segment-analytics with-slate with-portals-ssr ( _with-portals-ssr is based on a package not being updated in the last year_) with-videojs with-next-page-transitions with-firebase-cloud-messaging with-dynamic-app-layout with-dynamic-import with-next-transition with-carbon-components with-cerebral with-custom-babel-config Here and there I have removed some redundant imports as well. I believe with this PR, there are only 1 or 2 examples left using class-based components. If by any chance you find any, let me know and I'll refactor them too. If you don't like anything or you want me to change something, please let me know. **If there is anything else you'd like me to help with, I would be honored to assist.**
60 lines
1.6 KiB
JavaScript
60 lines
1.6 KiB
JavaScript
import { useState } from 'react'
|
|
import { UniversalPortal } from '@jesstelford/react-portal-universal'
|
|
|
|
const Index = () => {
|
|
const [isOpen, toggle] = useState(true)
|
|
|
|
return (
|
|
<>
|
|
{/* A portal that is adjacent to its target */}
|
|
<div id="target" />
|
|
<UniversalPortal selector="#target">
|
|
<h1>Hello Portal</h1>
|
|
</UniversalPortal>
|
|
|
|
{/* Open a modal in a portal that is elsewhere in the react tree */}
|
|
<button onClick={() => toggle(!isOpen)} type="button">
|
|
Open Modal
|
|
</button>
|
|
{isOpen && (
|
|
<UniversalPortal selector="#modal">
|
|
<div
|
|
style={{
|
|
position: 'fixed',
|
|
backgroundColor: 'rgba(0, 0, 0, 0.7)',
|
|
top: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
left: 0,
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
backgroundColor: 'white',
|
|
position: 'absolute',
|
|
top: '10%',
|
|
right: '10%',
|
|
bottom: '10%',
|
|
left: '10%',
|
|
padding: '1em',
|
|
}}
|
|
>
|
|
<p>
|
|
This modal is rendered using{' '}
|
|
<a href="https://www.npmjs.com/package/@jesstelford/react-portal-universal">
|
|
<code>@jesstelford/react-portal-universal</code>
|
|
</a>
|
|
.
|
|
</p>
|
|
<button type="button" onClick={() => toggle(!isOpen)}>
|
|
Close Modal
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</UniversalPortal>
|
|
)}
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default Index
|