React portal on context api

example.jsx

export default () => (
  <PortalProvider>
    <div>
      <PortalTarget name="out" />
      <div>
        <div>
          <h1>Content</h1>
          <Portal to="out">
            <p>text</p>
          </Portal>
        </div>
      </div>
    </div>
  </PortalProvider>
)

Portal.js

import { useContext, useLayoutEffect } from 'react'
import { PortalContext } from './PortalContext'

export function Portal ({ to, children }) {
  const { addTarget, removeTarget } = useContext(PortalContext)
  useLayoutEffect(() => {
    addTarget(to, children)
    return () => {
      removeTarget(to)
    }
  }, [to, children])
  return null
}

PortalContext.js

import React from 'react'

export const PortalContext = React.createContext({
  addTarget: () => {},
  removeTarget: () => {},
  targets: {},
})

PortalProvider.jsx

import React, { useCallback, useState } from 'react'
import { PortalContext } from './PortalContext'

export function PortalProvider (props) {
  const [targets, setTarget] = useState({})
  const addTarget = useCallback(
    (key, children) => {
      setTarget(state => ({ ...state, [key]: children }))
    },
    [targets]
  )
  const removeTarget = useCallback(key => {
    setTarget(state => {
      const newState = { ...state }
      delete newState[key]
      return newState
    })
  })
  return <PortalContext.Provider {...props} value={{ targets, addTarget, removeTarget }} />
}

PortalTarget.js

import { useContext } from 'react'
import { PortalContext } from './PortalContext'

export function PortalTarget ({ name }) {
  const { targets } = useContext(PortalContext)
  return targets[name] || null
}