Teleport your components to the foreground
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
example
img Add Lightbox + background on each component Oct 28, 2016
src
.babelrc Initial commit Oct 24, 2016
.eslintignore
.eslintrc Fix ESLint rules Oct 28, 2016
.gitignore
.npmignore Add example with webpack-dev-server + fixes Oct 27, 2016
.travis.yml
README.md Update README.md Jun 7, 2017
index.html
package.json 0.0.8 Nov 15, 2016
webpack.config.dev.js Add example with webpack-dev-server + fixes Oct 27, 2016
webpack.config.js
yarn.lock Add babel-polyfill + move some to styled-components Nov 15, 2016

README.md

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