# @onaio/element-map

> Simple component takes a list of elements and returns them wrapped in the provided HTML tag

Latest version **0.0.5** (published 2019-05-01) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @onaio/element-map
pnpm add @onaio/element-map
yarn add @onaio/element-map
bun add @onaio/element-map
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.5 |
| Published | 2019-05-01 |
| First published | 2019-03-13 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 16.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 11 |
| Author | Ona Engineering |
| Maintainers | onaio |
| Keywords | render lists |

## Links

- npm: https://www.npmjs.com/package/@onaio/element-map
- Repository: https://github.com/onaio/js-tools
- Issues: https://github.com/onaio/js-tools/issues
- npm.io page: https://npm.io/package/@onaio/element-map

## Recent versions

- 0.0.5 (latest) — 2019-05-01
- 0.0.3 — 2019-05-01
- 0.0.2 — 2019-03-21
- 0.0.1 — 2019-03-13

## README

# ElementMap

A simple `React` component that takes a list of elements and a HTML tag and outputs the same list of elements wrapped in the same HTML tag provided.

## Why is this useful?

`ElementMap` helps to keep code DRY - use it every time that have a list of things that you want to render wrapped inside a HTML tag, which happens a lot of times in any medium/large codebase.

Therefore this (or variations of it):

```js
const items = ['a', 'b', 'c'];
const wrappedItems = items.map(el => <li>el</li>);
return <ol>{wrappedItems}</ol>;
```

Becomes:

```js
import ElementMap from '@onaio/element-map';

const things = ['a', 'b', 'c'];
return (
  <ol>
    <ElementMap items={things} HTMLTag="li" />
  </ol>
);
```

## Examples

```js
import ElementMap from '@onaio/element-map';

const headerItems = ['Name', 'Age'];
let output = <ElementMap items={headerItems} HTMLTag="th" />;
// output should now look like:
// [<th>Name</th>, <th>Age</th>]
```

```js
import ElementMap from '@onaio/element-map';

const headerItems = ['Fruit', 'Price'];
let output = <ElementMap items={headerItems} HTMLTag="th" className="css-class" />;
// output should now look like:
// [<th className="css-class">Fruit</th>, <th className="css-class">Price</th>]
```

---
_Source: https://npm.io/package/@onaio/element-map · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._