| 1 | # rc-portal
|
| 2 |
|
| 3 | React 18 supported Portal Component.
|
| 4 |
|
| 5 | [![NPM version][npm-image]][npm-url] [](https://github.com/umijs/dumi) [![build status][github-actions-image]][github-actions-url] [![Codecov][codecov-image]][codecov-url] [![npm download][download-image]][download-url]
|
| 6 |
|
| 7 | [npm-image]: http://img.shields.io/npm/v/rc-portal.svg?style=flat-square
|
| 8 | [npm-url]: http://npmjs.org/package/rc-portal
|
| 9 | [github-actions-image]: https://github.com/react-component/portal/workflows/CI/badge.svg
|
| 10 | [github-actions-url]: https://github.com/react-component/portal/actions
|
| 11 | [codecov-image]: https://img.shields.io/codecov/c/github/react-component/portal/master.svg?style=flat-square
|
| 12 | [codecov-url]: https://codecov.io/gh/react-component/portal/branch/master
|
| 13 | [download-image]: https://img.shields.io/npm/dm/rc-portal.svg?style=flat-square
|
| 14 | [download-url]: https://npmjs.org/package/rc-portal
|
| 15 |
|
| 16 | ## Development
|
| 17 |
|
| 18 | ```bash
|
| 19 | npm install
|
| 20 | npm start
|
| 21 | open http://localhost:8000
|
| 22 | ```
|
| 23 |
|
| 24 | ## Feature
|
| 25 |
|
| 26 | - React life cycle support portal component
|
| 27 |
|
| 28 | ## Install
|
| 29 |
|
| 30 | [](https://npmjs.org/package/rc-portal)
|
| 31 |
|
| 32 | ## Usage
|
| 33 |
|
| 34 | ```js | pure
|
| 35 | import Portal from 'rc-portal';
|
| 36 |
|
| 37 | const Demo = () => {
|
| 38 | return <Portal open>Hello World</Portal>;
|
| 39 | };
|
| 40 |
|
| 41 | export default Demo;
|
| 42 | ```
|
| 43 |
|
| 44 | ## 🔥 API
|
| 45 |
|
| 46 | We use typescript to create the Type definition. You can view directly in IDE. But you can still check the type definition [here](https://github.com/react-component/portal/blob/master/src/interface.ts).
|
| 47 |
|
| 48 | ### Portal
|
| 49 |
|
| 50 | | Prop | Description | Type | Default |
|
| 51 | | ------------ | ---------------------------------- | ------------------------ | ------------- |
|
| 52 | | getContainer | Customize portal container element | Element \| () => Element | document.body |
|
| 53 | | open | Show the portal | boolean | false |
|
| 54 | | autoLock | Lock screen scroll when open | boolean | false |
|