Package - react-travel

React Travel

Your subtree should be able to travel into another top-level tree.

Example

<Travel
  onMount={node => {
    return(
      $(node).dialog({
        autoOpen: false,
        close: () => {
          this.setState({dialogOpen: false})
        }
      }).data('ui-dialog')
    )
  }}
  onUpdate={dialog => {
    if(dialogOpen) {
      dialog.open()
    } else {
      dialog.close()
    }
  }}
>
  <div>
    Even works with third party dialogs!
  </div>
</Travel>

Props

`to`: PropTypes.any

What node the portal is rendered to, defaults to document.body.

`tag`: PropTypes.string

What tag to use for the portal, defaults to div.

`id`: PropTypes.string

React id prop.

`className`: PropTypes.any

React className prop.

`style`: PropTypes.object

React style prop. Accepts an object of styles that are applied to the portal. Note that values require their respective unit applied i.e style={{padding: '12px'}}.

`children`: PropTypes.element

Accepts a single React element or component.

`onMount`: PropTypes.func

`onUpdate`: PropTypes.func

`onUnmount`: PropTypes.func

All tie into React's life cycle methods. Returns portal node with any work done to it.

Current Tags

1.3.6 ... latest (6 years ago)

React Travel

Example

Props

to: PropTypes.any

tag: PropTypes.string

id: PropTypes.string

className: PropTypes.any

style: PropTypes.object

children: PropTypes.element

onMount: PropTypes.func

onUpdate: PropTypes.func

onUnmount: PropTypes.func