@wazapp/helpers

Search…

Introduction

Packages

@wazapp/core

@wazapp/helpers

Helpers are utils that are meant to be used mostly in component templates.
API
each(collection, onItem, onEmpty)
each will make your iterations in template a breeze. It takes care of unique keys for each element, as well as simplify the syntax.
It takes 3 arguments:
collection - an array of something
onItem(item, index) - callback which will be used for each item in the collection
onEmpty - optional - ReactNode that will be returned in case the collection is empty. 
Example
Before
1
import Component from "@wazapp/component";
2
import { each } from '@wazapp/helpers'
3
​
4
export default class MyComponent extends Component {
5
  phrases = ['Maciej', 'was', 'here'];
6
​
7
  template({ name }) {
8
    return (
9
      <ul>
10
        {this.phrases.map((phrase) => (
11
          <li key={phrase}>
12
            {phrase}
13
          </li>
14
        ))}
15
      </ul>
16
    );
17
  }
18
}
Copied!
After
1
import Component from "@wazapp/component";
2
import { each } from '@wazapp/helpers'
3
​
4
export default class MyComponent extends Component {
5
  phrases = ['Maciej', 'was', 'here'];
6
​
7
  template({ name }) {
8
    return (
9
      <ul>
10
        {each(this.phrases, (phrase) => (
11
          <li>
12
            {phrase}
13
          </li>
14
        ))}
15
      </ul>
16
    );
17
  }
18
}
Copied!
when(condition, ifTrue, ifFalse)
when is simple if statement which does not require to return null as false case.
It takes 3 arguments:
condition
ifTrue - value when true
ifFalse - value when false
Example
Before
1
import Component from "@wazapp/component";
2
import { when } from '@wazapp/helpers'
3
​
4
export default class MyComponent extends Component {
5
  template({ name }) {
6
    return (
7
      <div>
8
        {name === 'Maciej' ? (
9
          <h1>Hi Maciej</h1>
10
        ) : null}
11
      </div>
12
    );
13
  }
14
}
Copied!
After
1
import Component from "@wazapp/component";
2
import { when } from '@wazapp/helpers'
3
​
4
export default class MyComponent extends Component {
5
  template({ name }) {
6
    return (
7
      <div>
8
        {when(name === 'Maciej', (
9
          <h1>Hi Maciej</h1>)
10
        )}
11
      </div>
12
    );
13
  }
14
}
Copied!
classNames()
Exposes: https://github.com/JedWatson/classnames​
yieldChildren(children, ...args)
yieldChildren allows you to return component's children or in case the children is a function, it will allow you to call it with custom arguments.
Arguments:
children: ReactNode | Function
...args: any[] - your custom arguments that will be used on children call (if children is a function)

Last modified 1yr ago

Copy link

Contents

API

each(collection, onItem, onEmpty)

when(condition, ifTrue, ifFalse)

classNames()

yieldChildren(children, ...args)