Sichqon

sichqon is a lightweight React library that provides a tunneling mechanism for rendering React components at different locations in your application's component tree. This library was inspired by tunnel-rat, adopting a similar approach to component tunneling while maintaining its own lightweight implementation. ## Installation ```bash npm install sichqon # or yarn add sichqon # or pnpm add sichqon ``` ## Features - 🪶 Lightweight and zero dependencies - 🌳 Type-safe with TypeScript support - ⚡ SSR compatible with isomorphic layout effects - 🎯 Simple API with just two components: `In` and `Out` ## Usage First, create a tunnel using the `createTunnel` function: ```tsx import { createTunnel } from 'sichqon'; const MyTunnel = createTunnel(); ``` Then use the tunnel's `In` and `Out` components to teleport content: ```tsx function App() { return (

My App

{/* Content sent through the tunnel */} {/* Other components */}

Main content

{/* Where the tunneled content appears */}

); } ``` ## How It Works Sichqon uses React's `useSyncExternalStore` hook to manage state synchronization between the `In` and `Out` components. The tunneling mechanism allows you to: 1. Send content from any part of your component tree using `` 2. Render that content elsewhere using `` 3. Multiple `In` components can send content to the same `Out` component 4. Content is rendered in the order it was sent ## API Reference ### `createTunnel()` Creates a new tunnel with `In` and `Out` components. ```tsx const Tunnel = createTunnel(); ``` ### `` The component that accepts children to be tunneled. Props: - `children`: ReactNode - The content to be tunneled ### `` The component that renders the tunneled content. No props required. ## Server-Side Rendering Sichqon is built with SSR in mind and uses an isomorphic layout effect to ensure consistent behavior between client and server environments. ## TypeScript Support Sichqon is written in TypeScript and provides full type definitions out of the box. ## Examples ### Modal Portal ```tsx const ModalTunnel = createTunnel(); function Modal({ children }) { return {children}; } function App() { return (

Modal Content

{/* Modal container at the root level */}

); } ``` ### Toast Notifications ```tsx const ToastTunnel = createTunnel(); function Toast({ message }) { return (

{message}

); } function App() { return (

{/* Toast container */}

); } ``` ## Contributing Contributions are welcome! Please feel free to submit a Pull Request.