Mapped Components

React components that render class names from props
_{Installation : Usage : Utilities : Extending : License}

Installation

npm i mapped-components --save

Usage

Create a mapper by defining breakpoints and a getter.

import PropTypes from 'prop-types';
import createMapper from 'mapped-components';

const useMapper = createMapper({
  breakpoints: [null, 'md', 'lg'],
  getter: ({ breakpoint, root, value }) =>
    [breakpoint, root, value]
      .filter(x => x || x === 0) // Value can be 0.
      .join('-') // Separate segments with a dash.
});

Create a component by pairing props with the root of a class name.

const Box = useMapper({
  size: 'box-size'
});

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

When a prop receives a value it will be sent to the getter with its root.

<Box size={0} />
// <div class="box-size-0"></div>

Arrays will also send the getter a breakpoint of a matching index.

<Box size={[1, 2, 3]} />
// <div class="box-size-1 md-box-size-2 lg-box-size-3"></div>

Utilities

Each component includes a set of utility props.

base

Prepend a class to the class list.

• Type: string

<Box base="box" size={1} /> 
// <div class="box box-size-1"></div>

blacklist

Block attributes from an element.

• Type: array

<Box blacklist={['href']} href="#" /> 
// <div></div>

tag

Transform the HTML tag.

• Type: string
• Default: div

<Box tag="h2" /> 
// <h2></h2>

Extending

Components maintain their mappings and propTypes.

const Section = useMapper({
  ...Box.mappings
});

Section.propTypes = {
  ...Box.propTypes
}

Section.defaultProps = {
  tag: 'section'
}

License

MIT © Sam Tietjen