open-index/open-npm huggingface dataset:
npm package: @samtietjen/mapped-classes
Description: Convert objects into class names
Latest version: 1.3.1

# Mapped Classes
Convert objects into consistent class name strings. 

## Installation
```shell
npm i @samtietjen/mapped-classes --save
```

## Usage
```js
import createMapper from '@samtietjen/mapped-classes';

const mapper = createMapper({
  breakpoints: [null, 'md', 'lg'],
  mappings: { fontSize: 'font-size', padding: 'p' },
  getter: ({ breakpoint, root, value }) => [breakpoint, root, value]
    .filter(x => x && value !== false || x === 0)
    .join('-')
});
 
const classes = mapper({ 
  fontSize: 1,
  padding: [1, 2, 3]
}); 

// 'font-size-1 p-1 md-p-2 lg-p-3'
```

## License
MIT © [Sam Tietjen](https://samtietjen.com)
npm package: @samtietjen/mapped-components
Description: Create components that map props to class names
Latest version: 0.13.0

# 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)