Closed uncenteredDiv closed 4 years ago
Yeah it's for accessibility. The <button>
controls the target. Without a target, there's nothing the <button>
controls anymore. If you're worried about performance you can:
import * as React from 'react'
import {Trigger, Target, useIsOpen} from '@accessible/modal'
const MyModalWindow = React.forwardRef((props, ref)=> {
const isOpen = useIsOpen()
return <div ref={ref} {...props}>{isOpen && "rest of component")}</div>
})
const MyModal = () => (
<React.Fragment>
<Trigger><button>Open me</button></Trigger>
<Target>
<MyModalWindow/>
</Target>
</React.Fragment>
)
This will render the targets that the button needs to control but will not render any expensive DOM elements you're worried about until the modal is actually open.
Nice! Thank you for the lightning fast response!
Really nice Package!
But I noticed something that confuses me - the
<Target>
get's always rendered, even when never shown.Is there a reason for that? Accessibility?
Currently I'm building a Mobile Menu Overlay with a lot a Nav Entries and I wonder if that maybe impact performance when I render the Overlay all the time.