typescript 71 lines · 2 tabs

React portals for rendering outside component tree

Maya Patel Jan 2026

2 tabs

import { ReactNode, useEffect, useState } from 'react'
import { createPortal } from 'react-dom'

interface PortalProps {
  children: ReactNode
  container?: Element
}

export function Portal({ children, container }: PortalProps) {
  const [mountNode, setMountNode] = useState<Element | null>(null)

  useEffect(() => {
    setMountNode(container || document.body)
  }, [container])

  return mountNode ? createPortal(children, mountNode) : null
}

import { useState, useRef, ReactNode } from 'react'
import { Portal } from './Portal'

interface TooltipProps {
  content: ReactNode
  children: ReactNode
}

export function Tooltip({ content, children }: TooltipProps) {
  const [isVisible, setIsVisible] = useState(false)
  const [position, setPosition] = useState({ top: 0, left: 0 })
  const triggerRef = useRef<HTMLDivElement>(null)

  const updatePosition = () => {
    if (triggerRef.current) {
      const rect = triggerRef.current.getBoundingClientRect()
      setPosition({
        top: rect.bottom + window.scrollY + 8,
        left: rect.left + window.scrollX + rect.width / 2,
      })
    }
  }

  return (
    <>
      <div
        ref={triggerRef}
        onMouseEnter={() => {
          updatePosition()
          setIsVisible(true)
        }}
        onMouseLeave={() => setIsVisible(false)}
        className="inline-block"
      >
        {children}
      </div>

      {isVisible && (
        <Portal>
          <div
            className="absolute z-50 px-3 py-2 text-sm text-white bg-gray-900 rounded shadow-lg"
            style={{
              top: `${position.top}px`,
              left: `${position.left}px`,
              transform: 'translateX(-50%)',
            }}
          >
            {content}
          </div>
        </Portal>
      )}
    </>
  )
}

2 files · typescript Explain with highlit

Portals render components outside their parent DOM hierarchy while maintaining React's component tree for context and events. I use portals for modals, tooltips, and dropdowns that need to escape overflow: hidden containers or z-index stacking contexts. ReactDOM.createPortal takes a component and a DOM node, rendering the component as a child of that node. Events bubble through the React tree, not the DOM tree, so click handlers work naturally. For modals, I render into a dedicated div at document root. Tooltips portal into a positioned container to avoid clipping. This technique solves CSS positioning nightmares while keeping component logic clean.

Related snips

typescript

import axios, { AxiosError } from 'axios'
import { v4 as uuidv4 } from 'uuid'

const api = axios.create({
  baseURL: import.meta.env.VITE_API_URL || 'http://localhost:3000/api/v1',
  timeout: 15000,

Axios API client with interceptors

react axios api

by Maya Patel 1 tab

typescript

import { create } from 'zustand'
import { persist } from 'zustand/middleware'

interface FilterState {
  search: string
  category: string | null

Zustand for lightweight state management

react zustand state-management

by Maya Patel 2 tabs

typescript

import React from "react";

type FallbackProps = {
  error: Error;
  reset: () => void;
};

React Error Boundary + error reporting hook

react frontend error-boundary

by codesnips 3 tabs

javascript

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
  openAnalyzer: true,
});

/** @type {import('next').NextConfig} */

Next.js bundle analyzer for targeted performance work

nextjs performance tooling

by codesnips 4 tabs

javascript

// Basic event listener
const button = document.getElementById('myButton');

button.addEventListener('click', function(event) {
  console.log('Button clicked!');
  console.log('Event type:', event.type);

Event handling and event delegation patterns in JavaScript

javascript events event-delegation

by Alex Chang 1 tab

typescript

import { Navigate, useLocation } from 'react-router-dom'
import { useAuth } from '@/contexts/AuthContext'

interface ProtectedRouteProps {
  children: React.ReactNode
}

React Router with protected routes

react react-router routing

by Maya Patel 2 tabs

Share this code

Here's the card — post it anywhere.

React portals for rendering outside component tree — share card

Link copied