# @rcp/hoc.mount > The high order component for mounting component Latest version **2.0.0** (published 2024-02-27) · MIT license · 0 weekly downloads ## Install ```sh npm install @rcp/hoc.mount pnpm add @rcp/hoc.mount yarn add @rcp/hoc.mount bun add @rcp/hoc.mount ``` ## Health **Score 35/100 (D)** — status: abandoned. Positive: has types; no vulnerabilities; high quality score. Warnings: low downloads; no esm support. Negative: abandoned. ## Facts | | | |---|---| | Version | 2.0.0 | | Published | 2024-02-27 | | First published | 2018-09-07 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | CommonJS | | Node | >=6 | | Dependencies | 4 | | Unpacked size | 23 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 6 | | Author | imcuttle | | Maintainers | moyuyc | | Keywords | imcuttle, hoc.mount | ## Links - npm: https://www.npmjs.com/package/@rcp/hoc.mount - Repository: https://github.com/imcuttle/rcp - Homepage: https://github.com/imcuttle/rcp#readme - Issues: https://github.com/imcuttle/rcp/issues - npm.io page: https://npm.io/package/@rcp/hoc.mount ## Dependencies (4) - [@rcp/util.createmount](https://npm.io/package/@rcp/util.createmount.md) ^2.0.0 - [@rcp/util.displayname](https://npm.io/package/@rcp/util.displayname.md) ^2.0.0 - [@rcp/util.tocompclass](https://npm.io/package/@rcp/util.tocompclass.md) ^2.0.0 - [@rcp/util.createlogger](https://npm.io/package/@rcp/util.createlogger.md) ^2.0.0 ## Recent versions - 2.0.0 (latest) — 2024-02-27 - 1.0.20 — 2021-09-29 - 1.0.19 — 2020-11-19 - 1.0.17 — 2020-07-04 - 1.0.15 — 2020-07-04 - 1.0.13 — 2020-04-13 - 1.0.12 — 2019-04-16 - 1.0.11 — 2018-09-16 - 1.0.10 — 2018-09-16 - 1.0.9 — 2018-09-14 - 1.0.8 — 2018-09-14 - 1.0.7 — 2018-09-08 - 1.0.6 — 2018-09-08 - 1.0.5 — 2018-09-07 ## README # @rcp/hoc.mount [![NPM version](https://img.shields.io/npm/v/@rcp/hoc.mount.svg?style=flat-square)](https://www.npmjs.com/package/@rcp/hoc.mount) [![NPM Downloads](https://img.shields.io/npm/dm/@rcp/hoc.mount.svg?style=flat-square&maxAge=43200)](https://www.npmjs.com/package/@rcp/hoc.mount) The high order component for mounting component It's useful on modal component which requires should be mounted at other node (e.g. `document.body`) or requires single rendering instance. ## Installation ```bash npm install @rcp/hoc.mount # or use yarn yarn add @rcp/hoc.mount ``` ## Usage ```javascript import mount from '@rcp/hoc.mount' const Title = mount()(({ props }) =>

{props.title}

) ReactDOM.render(
<Title title="bar" /> </div>, window.root ) // document.body.outerHTML // <body> // <div id="root"></div> // <div><h2>bar</h2></div> // </body> const TitleComponent = mount({ createTimeType: 'component', attributesGetter: ({ title }) => ({ id: title }) })(({ props }) => <h2>{props.title}</h2>) ReactDOM.render( <div> <TitleComponent title="foo" /> <TitleComponent title="bar" /> <TitleComponent title="barbar" /> </div>, window.root ) // document.body.outerHTML // <body> // <div id="root"></div> // <div id="foo"><h2>foo</h2></div> // <div id="bar"><h2>bar</h2></div> // <div id="barbar"><h2>barbar</h2></div> // </body> ``` ## API #### Options - `createTimeType` **(`"decorator"` \| `"class"` \| `"component"`)** (optional, default `'class'`) Create mount center in which time. - `decorator`: create at calling `mount()` time. - `class`: create at calling `mount()(Component)` time. - `component`: create at rendering `mount()(Component)` time. - `mountNodeGetter` **(`(props) => HTMLElement`)** (optional, default `() => document.body`) - `attributesGetter` **(`(props) => any`)** (optional, default `() => {}`) ## Related - [@rcp/util.createmount](../util.createmount) - The utility for creating mountable view ## Authors This library is written and maintained by imcuttle, <mailto:moyuyc95@gmail.com>. ## License MIT --- _Source: https://npm.io/package/@rcp/hoc.mount · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._