Neoclassic Placebo Maker

    react-teleportation

    0.0.8 • Public • Published

    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

    Install

    npm i react-teleportation

    DownloadsWeekly Downloads

    1

    Version

    0.0.8

    License

    MIT

    Last publish

    Collaborators

    • lfalorni
    • didierfranc