# @samtietjen/mapped-components

> Create components that map props to class names

Latest version **0.13.0** (published 2018-12-15) · 0 weekly downloads

## Install

```sh
npm install @samtietjen/mapped-components
pnpm add @samtietjen/mapped-components
yarn add @samtietjen/mapped-components
bun add @samtietjen/mapped-components
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.13.0 |
| Published | 2018-12-15 |
| First published | 2018-06-06 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 10 |
| Maintainers | samtietjen |

## Links

- npm: https://www.npmjs.com/package/@samtietjen/mapped-components
- Repository: https://github.com/samtietjen/mapped-system
- Homepage: https://github.com/samtietjen/mapped-system#readme
- Issues: https://github.com/samtietjen/mapped-system/issues
- npm.io page: https://npm.io/package/@samtietjen/mapped-components

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^16.5.2
- [@samtietjen/mapped-classes](https://npm.io/package/@samtietjen/mapped-classes.md) ^1.3.0

## Recent versions

- 0.13.0 (latest) — 2018-12-15
- 0.12.0 — 2018-12-14
- 0.11.2 — 2018-12-10
- 0.11.1 — 2018-10-08
- 0.11.0 — 2018-09-25
- 0.10.6 — 2018-09-24
- 0.10.0 — 2018-09-23
- 0.9.1 — 2018-09-14
- 0.8.3 — 2018-08-25
- 0.8.2 — 2018-08-25
- 0.8.1 — 2018-08-23
- 0.8.0 — 2018-08-07
- 0.7.0 — 2018-08-04
- 0.6.1 — 2018-07-27
- 0.6.0 — 2018-07-24
- … 15 more at https://npm.io/package/@samtietjen/mapped-components/versions

## README

# Mapped Components
A utility for building React components that map to your stylesheet.  

## Installation
```shell
npm i @samtietjen/mapped-components --save
```
> **Caution!** This package is still very experimental. 👨‍🔬

## Usage
```jsx
import PropTypes from 'prop-types';
import mapper from '@samtietjen/mapped-components';

const mapped = mapper({
  breakpoints: [null, 'md', 'lg'],
  getter: ({ breakpoint, root, value }) => [breakpoint, root, value]
    .filter(x => x && value !== false || x === 0)
    .join('-')
});

const Text = mapped({
  size: 'text-size'
});

Text.propTypes = {
  tag: PropTypes.string,
  base: PropTypes.string,
  size: PropTypes.oneOfType([
    PropTypes.number,
    PropTypes.array
  ])
}

Text.defaultProps = {
  tag: 'p',
  base: 'text'
}

render (
  <Text size={[1, null, 3]} /> 
  // <p class="text text-size-1 lg-text-size-3"></p>
);
```

## Extending
```jsx
const Heading = mapped({
  ...Text.mappings,
  color: 'text-color'
);

Heading.propTypes = {
  ...Text.propTypes,
  color: PropTypes.string
}

Heading.defaultProps = {
  base: 'heading',
  tag: 'h2'
}

<Heading size={1} color="black" />
// <h2 class="heading text-size-1 text-color-black"></h2>
```

## License
MIT © [Sam Tietjen](https://samtietjen.com)

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