Live

react-teleportation

Why ?

Following the portal principle, react-teleportation create a new tree in the DOM to display some component in the foreground. It avoids headache with some z-index weird tricks 😱 and can display your teleported component in full screen even if you run the modal from a component deep in the tree.

Usage

import React from 'react'
import Teleport, { Lightbox } from 'react-teleportation'
 
const Home = () => {
  const openLightbox = () => Teleport.init(<Lightbox url="img/1.jpg" />)
 
  return (
    <a onClick={openLightbox}>Open Lightbox</a>
  )
}
 
export default Home

Available components

Lightbox

<Lightbox url="img/1.jpg" />

Alert

const props = {
  title: 'Hi',
  description: 'Some text',
  right: {
    title: 'ok',
    action: () => Teleport.clear(),
  },
  left: {
    title: 'cancel',
    action: () => Teleport.clear(),
  },
}
 
<Alert {...props} />

Modal

<Modal>
  Some text
  <YourComponent />
</Modal>

Tutorial

<Tutorial>
  {[
    { id: 'componentId', text: 'Some information' },
    { id: 'anotherComponentId', text: 'Some information' },
  ]}
</Tutorial>

We're actually working on Snackbar (Toast), tutorial, and routing for modal and lightbox

Run and code

yarn && yarn start

Competitors

• react-portal : React component for transportation of modals, lightboxes, loading bars... to document.body

Submit a PR and add yours to this list !

---

Inspired by Ryan Florence talk https://www.youtube.com/watch?v=z5e7kWSHWTg