Portal 🚪✨

Greetings, DOM Teleporter! 🧙‍♀️

The portal module provides a Portal component that lets you render children into a different part of the DOM tree, outside of their parent component's DOM hierarchy. This is super useful for things like modals, tooltips, and dropdown menus that need to appear on top of everything else or escape an overflow: hidden parent.

It's like having a magic door in your component that leads anywhere in the DOM! 🌌

Why Use Portals?

• Stacking Context: To avoid z-index issues and ensure your component appears on top.
• Overflow: To break out of a parent container that has overflow: hidden or other restrictive styles.
• Accessibility: For modals, it's common to portal them to the end of document.body to manage focus and ARIA attributes correctly.

Basic Usage

import { Portal } from '@ryvora/react-portal';
import React, { useState } from 'react';

function MyModal() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Open Modal</button>
      {isOpen && (
        <Portal container={document.body}>
          {' '}
          {/* Optional: defaults to document.body */}
          <div className="my-modal-overlay">
            <div className="my-modal-content">
              <h2>I am a Portalled Modal!</h2>
              <button onClick={() => setIsOpen(false)}>Close</button>
            </div>
          </div>
        </Portal>
      )}
    </>
  );
}

Teleport your components to where they need to be! 슝! (Swoosh!) 💨