@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()

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