Always renders <Target>

[uncenteredDiv]

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.

[jaredLunde]

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.

[uncenteredDiv]

Nice! Thank you for the lightning fast response!