Render elements through a Portal, give you more control over your UI, e.g. rendering a button into footer inside your deeply nested component
- Declarative
- Start quickly
- Reasonable
- Test friendly
- New React Context API
- ReactDOM Portal
npm install react-create-portalor
yarn add react-create-portal- render different contents based on current route
// 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!"
*/- fallback UI when no Render rendered
// 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!"
*/- bundler
- static type
- test
- PortalProvider
- createPortal
- CI
- Breadcrumbs
- docs
- examples
- publish