onus-elements

Separate DOM position from rendering position. Like Portals, but better because you don't have to interact with the DOM, and you can easily replace or append to the previous content.

Installation

yarn add onus-elements

or

npm i --save onus-elements

Usage

import { GetElement, SetElement, OnusElementsProvider } from 'onus-elements'

<OnusElementsProvider>
  <header>
    <GetElement name='header' />
  </header>
  <footer>
    <SetElement name='header' priority={0}>
      <a href='/'>Home</a>
    </SetElement>
    // These can be rendered anywhere in your application, and it will appear where GetElement lives in the DOM
    <SetElement name='header' priority={1} append>
      <span>
        > <a href='/breadcrumb'>Breadcrumb</a>
      </span>
    </SetElement>
  </footer>
</OnusElementsProvider>

Props

GetElement

Used as placeholder for where you want content to be rendered

| Prop | Type | Default | Description | | ---- | ---- | ------- | ----------- | | name | String | Required | Unique name that will be matched with SetElement | | children | Node | undefined | Default content to render if nothing else has been provided |

SetElement

Used to set the content to be rendered inside the GetContent component

| Prop | Type | Default | Description | | ---- | ---- | ------- | ----------- | | children | Node | Fragment | Children to render in GetElement with a matching name | | name | String | Required | Unique name that will be matched with GetElement | | priority | Number | Required | Priority to render children, highest wins | | append | Boolean | undefined | Append children to currently rendered content | | prepend | Boolean | undefined | Prepended children to currently rendered content |

useSetElement

Hook to set the onus element at the top of your component

| | Name | Type | Default | Description | |-------| -------- | ------ | ------- | ----------- | | Param | Options | Object | Required | Describes the element to set | | ↳ | name | String | Required | Same as SetElement name | | ↳ | priority | Number | Required | Same as SetElement priority | | ↳ | append | Boolean | undefined | Same as SetElement append | | ↳ | prepend | Boolean | undefined | Same as SetElement prepend | | Param | node | Node | null | Children to render in the GetElement with a matching name |

Testing

yarn test

Build Example

yarn build

Start Example

yarn start