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><GetElementname='header'/></header><footer><SetElementname='header'priority={0}><ahref='/'>Home</a></SetElement>
// These can be rendered anywhere in your application, and it will appear where GetElement lives in the DOM
<SetElementname='header'priority={1}append><span>><ahref='/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