# react-travel

> Simple, unopinionated, React portal that renders it's subtree into a desired container.

Latest version **1.3.6** (published 2018-05-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-travel
pnpm add react-travel
yarn add react-travel
bun add react-travel
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.6 |
| Published | 2018-05-22 |
| First published | 2015-10-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 71.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 7 |
| Author | Travis Arnold |
| Maintainers | souporserious |
| Keywords | react, react-component, component, react-portal, portal, transportation |

## Links

- npm: https://www.npmjs.com/package/react-travel
- Repository: https://github.com/souporserious/react-travel
- Issues: https://github.com/souporserious/react-travel/issues
- npm.io page: https://npm.io/package/react-travel

## Dependencies (1)

- [prop-types](https://npm.io/package/prop-types.md) ^15.6.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.3.6 (latest) — 2018-05-22
- 1.3.5 — 2017-06-19
- 1.3.4 — 2017-06-19
- 1.3.3 — 2017-06-19
- 1.3.2 — 2017-06-13
- 1.3.1 — 2017-03-16
- 1.3.0 — 2017-03-15
- 1.2.1 — 2017-03-15
- 1.2.0 — 2017-03-15
- 1.1.2 — 2015-11-01
- 1.1.1 — 2015-10-23
- 1.1.0 — 2015-10-23
- 1.0.0 — 2015-10-23
- 0.0.1 — 2015-10-22

## README

## React Travel

[![npm version](https://badge.fury.io/js/react-travel.svg)](https://badge.fury.io/js/react-travel)
[![Dependency Status](https://david-dm.org/souporserious/react-travel.svg)](https://david-dm.org/souporserious/react-travel)

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

## Example
```js
<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.

---
_Source: https://npm.io/package/react-travel · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._