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