Skip to content
Rogain core template helpers
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib
test
.babelrc
.gitignore
.npmignore
LICENSE
README.md
package.json

README.md

rogain-core-helpers

Core helpers for Rogain templates.

Helpers

Frame

Alias and create inline variables.

<Frame friend={@attrs.name} intro="My friend's name is">
    <div>{intro} {friend}</div>
</Frame>
<Friend name="Buckle" />
<div>My friend's name is Buckle</div>

Children

Provides an outlet in a component that can be used to compose components.

<div class="card"><Children /></div>

Each

Returns a tree of the data mapped to children. Each child can access the current element with the @item (or as attribute) properties and the current index with @index.

<Each data={searchResults} as="@result">
    <h3>{@result.title}</h3>
    <p>{@result.excerpt}</p>
</Each>

Attributes

data

Variable. Array.

as

String. Defines the local variable for accessing each element in data. Defaults to @item.

Defined

Returns children if data is an non-empty Array or Object ([0, 1], {x:1,y:3}) or defined variable. If the <Else /> branch is defined, it will be returned when data is empty or undefined.

<Defined data={searchResults}><Results /></Defined>

Attributes

data

Variable or Expression.

Empty

Returns children if data is an empty Array or Object ([], {}) or undefined variable. If the <Else /> branch is defined, it will be returned when data is non-empty and defined.

<Empty data={searchResults}>No results.</Empty>

Attributes

data

Variable or Expression.

If

Returns it's children if data to value are equal. If the <Else /> branch is defined, it will be returned when data and value are not equal.

If value is not defined, If will have the same behavior as Defined.

<If data={loggedIn} value="true"><Dashboard /></If>

Attributes

data

Variable or Expression.

value

Variable or Expression. Optional.

Unless

Returns it's children if data to value are not equal. If the <Else /> branch is defined, it will be returned when data and value are equal.

If value is not defined, Unless will have the same behavior as Empty.

<Unless data={loggedIn} value="true"><LoginForm /></Unless>

Attributes

data

Variable or Expression.

value

Variable or Expression. Optional.

Range

Returns children if data is between min and max. If the <Else /> branch is defined, it will be returned when data is out of range.

Omitting min or max will default to -Infinity and Infinity respectively.

<Each data={searchResults}>
    <Range data={@index} min="0" max="2">
        <!-- Top 3 -->
        <h2>{@item.title}</h2>
        <p>{@item.excerpt}</p>
    <Else />
        <!-- The rest -->
        <h3>{@item.title}</h3>
    </Range>
</Each>

Attributes

data

Variable or expression.

min

Number. Optional.

max

Number. Optional.

Else

Implicit helper. Can be used with If, Unless, Defined, Empty, Range. Used to denote an inverse branch.

<If data={loggedIn} value="true">
    <!-- If Branch -->
<Else />
    <!-- Else Branch -->
</If>

<Unless data={loggedIn}><Else /></Unless>
<Defined data={loggedIn}><Else /></Defined>
<Empty data={loggedIn}><Else /></Empty>
<Range data={loggedIn}><Else /></Range>

Else helper is not meant to be called as a block, it's used to split trees inside other helpers.

Install

With npm do:

npm install rogain-core-helpers

License

MIT

You can’t perform that action at this time.