onus-elements

2.2.5 • Public • Published

onus-elements

npm Version License

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

Dependencies (0)

    Dev Dependencies (15)

    Package Sidebar

    Install

    npm i onus-elements

    Weekly Downloads

    1,649

    Version

    2.2.5

    License

    MIT

    Unpacked Size

    108 kB

    Total Files

    16

    Last publish

    Collaborators

    • jakerichan