react-attribute-as-class v1.0.1

react-attribute-as-class

A simple module that allows you to simply use attributes as classes in React components, instead of using className. e.g. <Component button primary> instead of <Component className="button primary">

Installation

Download node at nodejs.org and install it, if you haven't already.

npm install react-attribute-as-class --save

Dependencies

• ramda: A practical functional library for JavaScript programmers.

Dev Dependencies

This module has been written in ES2015 and is compiled by Babel. If you want to modify and recompile, you probably will need tese modules:

• babel-cli: Babel command line.
• babel-preset-es2015: Babel preset for all es2015 plugins.

How to Use

// Importing
import solveClass from 'react-attribute-as-class';

// The class solver function:
// props: Component properties should be passed here.
// possibleClasses: Here you should pass aa list of classes that can be used in the component in an attribute way.
// defaultClasses: Optionally, you can pass a list of classes that will be included by default.

classes = solveClass(props, possibleClasses [, defaultClasses]);

Example of Usage

Here comes an example of a Button dumb component made with Semantic UI and classSolver.

Button.jsx

import React from 'react';
import solveClass from 'react-attribute-as-class';

const Button = ({children, ...other}) => {
	let classes = solveClass(other, ['primary', 'disabled', 'huge'], ['ui', 'button']);

	return (
		<button className={classes} {...other}>
			{ children }
		</button>
	);
}

export default Button;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import Button from './components/Button.jsx';

var buttonOk = document.getElementById('button_render_ok');
var buttonFail = document.getElementById('button_render_fail');

ReactDOM.render(<Button primary huge>Nice Button!</Button>, buttonOk); // Will render a beautiful huge button.
ReactDOM.render(<Button secondary mini>Not so nice Button!</Button>, buttonOk); // These attributes will not be rendered as classes, as have been not passed in possibleClasses, but will still have defaultClases.