Newton's Preposterous Miscalculation

    react-transfer

    1.0.0 • Public • Published

    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";
     
    function Component(){
      return (
        <Transporter collect="collectId">
          <div className="transport-item">
            <TransportItem itemKey="key1">item1</TransportItem>
            <TransportItem itemKey="key2">item2</TransportItem>
            <TransportItem itemKey="key3">item3</TransportItem>
          </div>
          <div className="destination">
            <Destination collect="collectId" />
          </div>
        </Transporter>
      );
    }
     
    ReactDOM.render(
      <Component />,
      document.querySelector("#app")
    );

    Advanced

    Please look at the example.
    example

    Demo

    https://nabepon.github.io/react-transfer/example/src/

    Install

    npm i react-transfer

    DownloadsWeekly Downloads

    7

    Version

    1.0.0

    License

    MIT

    Last publish

    Collaborators

    • nabepon