# react-hoc-templateable-component-mapper

> Build templates embedding structural components for a list of data items.

Latest version **1.0.0** (published 2018-01-12) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-hoc-templateable-component-mapper
pnpm add react-hoc-templateable-component-mapper
yarn add react-hoc-templateable-component-mapper
bun add react-hoc-templateable-component-mapper
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2018-01-12 |
| First published | 2018-01-12 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | baflo |

## Links

- npm: https://www.npmjs.com/package/react-hoc-templateable-component-mapper
- Repository: https://baflo@github.com/baflo/react-hoc-templateable-component-mapper
- Homepage: https://github.com/baflo/react-hoc-templateable-component-mapper#readme
- Issues: https://github.com/baflo/react-hoc-templateable-component-mapper/issues
- npm.io page: https://npm.io/package/react-hoc-templateable-component-mapper

## Recent versions

- 1.0.0 (latest) — 2018-01-12

## README

# react-hoc-templateable-component-mapper
Build templates embedding structural components for a list of data items.

## Install

`npm install react-hoc-templateable-component-mapper`

## Usage

```tsx
import * as React from "react";
import { render } from "react-dom";
import { templateable } from "react-hoc-templateable-component-mapper";

// Define some base component for the template
class Post extends React.Component<{ text: string } & React.HTMLAttributes<HTMLDivElement>> {
  render() {
    const htmlProps = { ...this.props };
    delete htmlProps.text;

    return (
      <div {...htmlProps}>
        {this.props.text}
      </div>
    )
  }
}

// Make a templateable map from the base component
const Feed = templateable(Post);

// Examples how to use templateable map
class Templated extends React.Component {
  render() {
    // Some data items that the base component shall use
    const items = [{ text: 'Hello' }, { text: 'Bye!' }];

    return (
      <div>
        {/* Just put data elements for the Post component in the array. */}
        <Feed items={items} />

        {/* One can put divs around. */}
        <Feed items={items}>
          {
            post => <div style={{ color: 'blue' }}>{post}</div>
          }
        </Feed>

        {/* Or modify. */}
        <Feed items={items}>
          {
            post => {
              const newProps: { text: string } & React.HTMLAttributes<HTMLDivElement>
                = { ...post.props, style: { color: 'red' } };

              return React.cloneElement(post, newProps);
            }
          }
        </Feed>

        {/* Or filter. */}
        <Feed items={items}>
          {
            (post, idx, data) => {
              if (data[idx].text.toLowerCase().indexOf('bye') !== -1) {
                return null;
              }
              else {
                return post;
              }
            }
          }
        </Feed>
      </div>
    )
  }
}

render(<Templated />, document.getElementById("root"));
```

## License

[LICENSE](./LICENSE)

---
_Source: https://npm.io/package/react-hoc-templateable-component-mapper · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._