portals

portal.js

import { createEvent, createStore } from 'effector'
import { useLayoutEffect } from 'react'
import { useStoreMap } from 'effector-react'

const portalSetted = createEvent()
const portalRemoved = createEvent()
const $portal = createStore({})
$portal
  .on(portalSetted, (state, { destination, children }) => ({
    ...state,
    [destination]: children,
  }))
  .on(portalRemoved, (state, destination) => {
    return Object.fromEntries(Object.entries(state).filter(([key]) => key !== destination))
  })

export function Portal({ children, destination }) {
  useLayoutEffect(() => {
    portalSetted({ children, destination })
    return () => {
      portalRemoved(destination)
    }
  }, [children, destination])
  return null
}

export function PortalOut({ name }) {
  return useStoreMap({
    store: $portal,
    keys: [name],
    fn: (portals, [key]) => portals[key] || null,
  })
}