Skip to content

Latest commit

 

History

History

hoc.mount

README.md

@rcp/hoc.mount

NPM version NPM Downloads

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

npm install @rcp/hoc.mount
# or use yarn
yarn add @rcp/hoc.mount

Usage

import mount from '@rcp/hoc.mount'

const Title = mount()(({ props }) => <h2>{props.title}</h2>)

ReactDOM.render(
  <div>
    <Title title="foo" />
    <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

Authors

This library is written and maintained by imcuttle, mailto:[email protected].

License

MIT