Skip to content
Tools for fuzzy-chainsaw
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib
tests
.babelrc
.editorconfig
.gitignore
.npmignore
README.md
package.json
yarn.lock

README.md

fuzzy-rucksack

Some tools to help on your fuzzy-chainsaw adventures.

Install

npm install fuzzy-rucksack --save-dev

Documentation

createVariants(prefix, variants)

Creates an array of classNames from a space seperated variants string.

Example

createVariants('box--', 'round large dark');

/* output */
['box--round', 'box--large', 'box--dark']

createClassName(classNameArray)

Creates a className string based on input arrays. skips undefined values and flattens array entries.

Example

createClassName([
	'box',
	['box--round', 'box--large'],
	props.isActive ? 'box--is-active' : undefined,
	props.className
]);

/* props */
{ isActive: true, className: 'js-extra' }

/* output */
'box box--round box--large box--is-active js-extra'

PropTypes.variants(variantArray)

Validates that all variants in a space seperated string are valid.

Useage

const Button = ({ variant }) => (
	<div className={createVariants('box--', variant)} />
);

Button.propTypes = {
	variant: PropTypes.variants(['round', 'large', 'dark'])
}

/* valid */
<Button variant="round" />
<Button variant="large dark" />

/* invalid */
<Button variant="utlra" />
<Button variant="big dark" />
<Button variant="round ultra dark" />

License

MIT Copyright ConnectiveDX 2016

You can’t perform that action at this time.