React Transfer
Rendering components in a different location.
Installation
npm install --save react-transfer
Why React Transfer?
When making Modal with React, manage display order with z-index. However, as elements to be displayed on the front (such as fixed headers and drawer menus) increase, it becomes impossible to manage with z-index. In the react-transfer approach, we will transport the elements you want to display in front to the end of the DOM tree. The display order problem is solved by controlling the display order with javascript.
Example
API
Transporter
We will transport the elements in the range wrapped in the Transporter.
<Transporter collect="uniq_id">some jsx</Transporter>
TransportItem
We will transport the wrapped elements in the TransportItem.
<TransportItem itemKey="uniq_key">some jsx</TransportItem>
Destination
The destination of the TransportItem. The collect attribute should be the same as Transporter.
<Destination collect="uniq_id">reducer function</Destination>
Usage
import React from "react";import Transporter TransportItem Destination from "react-transfer"; { return <Transporter ="collectId"> <div ="transport-item"> <TransportItem ="key1">item1</TransportItem> <TransportItem ="key2">item2</TransportItem> <TransportItem ="key3">item3</TransportItem> </div> <div ="destination"> <Destination ="collectId" /> </div> </Transporter> ;} ReactDOM;
Advanced
Please look at the example.
example