@onus-elements/react v1.0.0

@onus-elements/react

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>

Note

When inspecting the element using the React Dev Tools, you will notice the GetElement component rendered in your application. That GetElement will render a Fragement with a "key" prop using the pattern name:priority:index where:

• name is the name of the content you want to render
• priority is the deepest applied number (provided by the SetElement)
• index increments when there multiple sources for the same depth (via append or prepend)

Props

GetElement

Used as placeholder for where you want content to be rendered

SetElement

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

useSetElement

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

Testing

yarn test

Build Example

yarn build

Start Example

yarn start

Running unit tests

Run nx test onus-react to execute the unit tests via Jest.