react-classlist-helper - npm Package Compare versions

Comparing version 1.1.0 to 1.1.1

package.json

 {
   "name": "react-classlist-helper",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Helper to defining multiple classes on a react component.",
   "main": "./dist/react-classlist-helper.min.js",
   "scripts": {
-    "test": "nyc --reporter=lcov mocha ./src/index.spec.js --compilers js:babel-core/register",
+    "test": "nyc -x ./src/index.spec.js mocha ./src/index.spec.js --compilers js:babel-core/register ",
+    "cover": "npm test && nyc report -x ./src/index.spec.js --reporter=text-lcov | coveralls",
     "lint": "eslint ./src/index.js",
@@ -31,2 +32,3 @@ "prebuild": "npm run lint && npm test",
     "chai": "^4.0.2",
+    "coveralls": "^2.13.1",
     "eslint": "^3.19.0",
@@ -33,0 +35,0 @@ "eslint-config-airbnb-base": "^11.2.0",

README.md

 # React classList Helper
 Helper to defining multiple classes on a react component.
 
-## Getting up and running
+[![Build Status](https://travis-ci.org/flasd/react-classlist-helper.svg?branch=master)](https://travis-ci.org/flasd/react-classlist-helper) [![Coverage Status](https://coveralls.io/repos/github/flasd/react-classlist-helper/badge.svg?branch=master)](https://coveralls.io/github/flasd/react-classlist-helper?branch=master) [![npm version](https://badge.fury.io/js/react-classlist-helper.svg)](https://www.npmjs.com/package/react-classlist-helper)
 
-Install with a package manager of choice: 
+## Getting it up and running
+
+Add the latest version of react-classlist-helper to your package.json:
 ```
-    npm install react-classlist-helper --save-dev
-    // Or
-    yarn add react-classlist-helper --dev
+npm install react-classlist-helper --save-dev
 ```
+Also available with Yarn:
+```
+yarn add react-classlist-helper --dev
+```
 
-## Usage
-Import `classList` from `react-classlist-helper`. 
+## API
+
+### classList(class1: string | array | object, class2, class3, ...classN): string
+Used to add multiple classes to an element:
+
 ```javascript
 import classList from 'react-classlist-helper';
+
 ...
-const Component = (props) => (
+
+const Component = () => (
     <div className={ classList(myCssClass1, myCssClass2, myCssClass3) } />
@@ -24,29 +33,49 @@ );
 ```
-##### ClassMap
 
-You can use it with a `ClassMap`. It's usefull for when you need to toggle a class based on a boolean condicion. A ClassMap has the following structure:
+Also works with Arrays `['className', 'className2']` and Objects `{ ClassName: boolean }`;
+
+Object form is usefull for creating conditional classes:
+
 ```javascript
-type ClassMap = {
-    className: boolean,
-    ...
-};
+const mobileClass = 'myAwesomeMobileClass';
+const desktopClass = 'myDesktopClass';
+const isMobile = true;
+
+const classMap = {};
+classMap[mobileClass] = isMobile;
+classMap[desktopClass] = !isMobile;
+// { myAwesomeMobileClass: true, myDesktopClass: false }
+
+...
+
+const Component = () => (
+    <div className={ classList(classMap) } />
+);
+
+// <div class="myAwesomeMobileClass"></div>
+
 ```
-##### Usage:
+
+### toggleClass(className: string, condition: boolean): string
+
+If you have only one class to toggle based on a condition:
 ```javascript
-import classList from 'react-classlist-helper';
+import { toggleClass } from 'react-classlist-helper';
+
 ...
-const ClassMap = {
-    myAwesomeCssClass: true,
-    myBadCssClass: false,
-    myAwesomeCssClass2: true,
-    myAwesomeCssClass3: true,
-};
-const Component = (props) => (
-    <div className={ classList(ClassMap) } />
+
+const isACOn = true;
+const coldClass = 'cool';
+
+const Component = () => (
+    <div className={ toggleClass(coldClass, isACOn) } />
 );
+// <div class="cool"></div>
 
-// <div class="myAwesomeCssClass myAwesomeCssClass2 myAwesomeCssClass3"></div>
+isACOn = false;
+// <div class=""></div>
+
 ```
 
-It prevent classes with `key: false` from beeing rendered.
+Happy coding!
 
@@ -53,0 +82,0 @@ ## MIT Licence

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

14792

increased by7.08%

Number of lines in readme file

88

increased by49.15%

Worsened metrics

Dev dependency count

12

increased by9.09%

No dependency changes