# react-create-portal

> Render your component with react portal

Latest version **0.5.3** (published 2023-04-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-create-portal
pnpm add react-create-portal
yarn add react-create-portal
bun add react-create-portal
```

## Health

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

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.5.3 |
| Published | 2023-04-14 |
| First published | 2018-11-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 25.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | levinqdl |

## Links

- npm: https://www.npmjs.com/package/react-create-portal
- npm.io page: https://npm.io/package/react-create-portal

## Recent versions

- 0.5.3 (latest) — 2023-04-14
- 0.5.2 — 2023-03-21
- 0.5.1 — 2023-02-11
- 0.5.0 — 2022-11-10
- 0.4.2 — 2020-03-02
- 0.4.1 — 2020-02-27
- 0.4.0 — 2020-02-27
- 0.3.1 — 2019-12-25
- 0.3.0 — 2019-10-11
- 0.2.0 — 2019-04-20
- 0.1.0 — 2018-11-25

## README

# React Create Portal

[![Build Status](https://travis-ci.org/levinqdl/react-create-portal.svg?branch=master)](https://travis-ci.org/levinqdl/react-create-portal)
[![npm version](https://badge.fury.io/js/react-create-portal.svg)](https://badge.fury.io/js/react-create-portal)
![coverage](./coverage/badge.svg)

Render elements through a Portal, give you more control over your UI, e.g. rendering a button into footer inside your deeply nested component

## Principles

- Declarative
- Start quickly
- Reasonable
- Test friendly

## Prerequisites

- New React Context API
- ReactDOM Portal

## Get Started

```bash
npm install react-create-portal
```

or

```bash
yarn add react-create-portal
```

## Examples

1. render different contents based on current route

```javascript
// App.js
import React from "react"
import { PortalProvider, createPortal } from "react-create-portal"

const [
  Slot, // place Slot at where elements render
  Render, // Render's children will be portaled into Slot
] = createPortal()

const App = () => (
  <PortalProvider>
    <div>
      Hello <Slot />!
    </div>
    <Router>
      <Route path="/world">
        <Render>World</Render>
      </Route>
      <Route path="/react">
        <Render>React</Render>
      </Route>
    </Router>
  </PortalProvider>
)

/** output dom
 * <div>Hello World!</div> // /world renders "Hello World!"
 * <div>Hello React!</div> // /react renders "Hello React!"
 */
```

2. fallback UI when no Render rendered

```javascript
// App.js
const App = () => (
  <PortalProvider>
    <div>
      Hello <Slot fallback="World" />!
    </div>
    <Router>
      <Route path="/world">
        <div>World Page</div>
      </Route>
      <Route path="/web">
        <div>Web Page</div>
      </Route>
      <Route path="/react">
        <Render>React</Render>
      </Route>
    </Router>
  </PortalProvider>
)

/** output dom
 * <div>Hello World!</div> // /world renders "Hello World!"
 * <div>Hello World!</div> // /web renders "Hello World!"
 * <div>Hello React!</div> // /react renders "Hello React!"
 */
```

## Todos

- [x] bundler
- [x] static type
- [x] test
- [x] PortalProvider
- [x] createPortal
- [x] CI
- [ ] Breadcrumbs
- [ ] docs
- [x] examples
- [ ] publish

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