React-Portal-Minimal
Demo
React-Portal-Minimal is a minimalistic version of React-Portal.
Compared to React-Portal, it is less than 1/3 the size, has minimal options, and no state.
It is intended as a building block. It does only three things:
- Hoists its contents to a new React subtree.
- Optionally sets a
className
on the subtree root. - Updates that
className
on the subtree root if it changes.
Features
- Transports its child into a new React component and appends it to the document.body (creates a new independent React tree)
- Doesn't leave any mess in DOM after unmount.
- no dependencies
- fully covered by tests
Installation
npm install react react-dom react-portal-minimal --save
Size
react-portal | react-portal-minimal | |
---|---|---|
require() size | 7.3kB | 3.7kB |
tarball size | 450kB | 4.2kB |
Usage
import React from 'react';import ReactDOM from 'react-dom';import Portal from 'react-portal-minimal'; Component { const button1 = <button>Open portal with pseudo modal</button>; return <Portal> <PseudoModal> <h2>Pseudo Modal</h2> <p>This react component is appended to the document body</p> </PseudoModal> </Portal> ; } Component { return <div> thispropschildren <p><button =>Close this</button></p> </div> ; } ReactDOM;
Documentation - props
Required
children : ReactElement
The portal expects one child (<Portal><Child ... /></Portal>
) that will be ported.
Optional
className: string
A className to apply to the new React tree's root.
Contribution
Please, create issues and pull requests.
git clone https://github.com/strml/react-portal-minimalcd react-portal-minimalnpm installnpm startopen http://localhost:3000
Don't forget to run this before every commit:
npm test
Credits
This project is based on @tajo's react-portal.