Mapped System

React style props that render consistent class names
_{Introduction : Installation : Usage : Packages : Credits : License}

Introduction

Mapped System is a library for creating React elements that render class names from props. It takes a simple, easy-to-maintain, rules-based approach without tedious logic. Try it out on CodeSandbox!

Installation

npm i mapped-system

Usage

Create a component by pairing props (i.e. size) with class names (i.e. box-size).

import PropTypes from 'prop-types';
import useMapper from 'mapped-system';

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

Box.propTypes = {
  size: PropTypes.any
}

Props will append values to their class names.

<Box size={1} />
// Segments are separated by a dash.
// <div class="box-size-1"></div>

<Box size="100%" />
// Percentage signs convert to `p`.
// <div class="box-size-100p"></div>

<Box size={2.5} />
// Floats round to the nearest integer.
// <div class="box-size-3"></div>

<Box size={1/3} />
// Numbers between `0` and `1` convert to percentages.
// <div class="box-size-33p"></div>

<Box size={true} />
// Booleans add the class name while `true`.
// <div class="box-size"></div>

<Box size={{large: true, children: 1}} />
// Objects prefix keys to values.
// <div class="box-size-large box-size-children-1"></div>

<Box size={[1, 2, 3]} />
// Arrays prefix breakpoints `md` and `lg` at indexes `1` and `2`.
// <div class="box-size-1 md-box-size-2 lg-box-size-3"></div>

<Box size={() => 1 + 2} />
// Functions return their output.
// <div class="box-size-3"></div>

Advanced

Functions can be used to handle complex mappings.

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

<Box size={1} />
// As a mapping it will pass its value as an argument.
// <div class="size-4-box"></div>

Utilities

Each component includes base, blacklist, and tag utilities.

<Box base="box" size={1} /> 
// Prepend a class to the class list.
// <div class="box box-size-1"></div>

<Box blacklist={['href']} href="#" /> 
// Block attributes from an element.
// <div></div>

<Box tag="h2" /> 
// Transform the HTML tag.
// <h2></h2>

Extending

Components maintain mappings and propTypes.

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

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

Section.defaultProps = {
  tag: 'section'
}

Packages

Credits

Inspired by Styled System.

License

MIT © Sam Tietjen