React Teleporter is a small library for rendering content from one component into a target located elsewhere in the same React tree. It is designed for complex layouts where a page needs to configure areas such as headers, status bars, toolbars, or footers. Developers create a teleporter that exposes Source and Target components, then place each one where its responsibility belongs. Targets can render as different elements, receive forwarded props, or use a custom target reference. An optional multi-source mode combines content from several sources inside one destination. Function children and React Portal support provide additional control while preserving a simple API centered on the createTeleporter function.
Features
- Source and Target components
- Same-tree content teleportation
- Multiple source support
- Custom target elements
- Forwarded target props
- React Portal integration