React component used to hoist components to a new subtree.
npm install react-portal-minimalReact-Portal-Minimal
============
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:
1. Hoists its contents to a new React subtree.
2. Optionally sets a className on the subtree root.
3. Updates that className on the subtree root if it changes.
- 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
``shell`
npm install react react-dom react-portal-minimal --save
| | react-portal | react-portal-minimal |
|----------------|--------------|----------------------|
| require() size | 7.3kB | 3.7kB |
| tarball size | 450kB | 4.2kB |
`jsx
import React from 'react';
import ReactDOM from 'react-dom';
import Portal from 'react-portal-minimal';
export default class App extends React.Component {
render() {
const button1 = ;
return ( This react component is appended to the document body.
Pseudo Modal
);
}
}
export class PseudoModal extends React.Component {
render() {
return (
}
ReactDOM.render(
`
#### children : ReactElement
The portal expects one child () that will be ported.
#### className: string
A className to apply to the new React tree's root.
Please, create issues and pull requests.
`shell`
git clone https://github.com/strml/react-portal-minimal
cd react-portal-minimal
npm install
npm start
open http://localhost:3000
Don't forget to run this before every commit:
`
npm test
This project is based on @tajo's react-portal.