classjoin - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

es2015/index.js

@@ -11,3 +11,3 @@ function classJoin(withConditions, withoutConditions) {
     if (withoutConditions) {
-        classes = classes.concat(withoutConditions);
+        classes = withoutConditions.concat(classes);
     }
@@ -14,0 +14,0 @@ return classes.join(' ');

es5-esm/index.js

@@ -11,3 +11,3 @@ function classJoin(withConditions, withoutConditions) {
     if (withoutConditions) {
-        classes = classes.concat(withoutConditions);
+        classes = withoutConditions.concat(classes);
     }
@@ -14,0 +14,0 @@ return classes.join(' ');

es5/classjoin.min.js

@@ -1,1 +0,1 @@
-!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):e.classJoin=n()}(this,function(){"use strict";function e(e,n){for(var t=[],o=Object.keys(e),f=0,i=o.length;f<i;f++){var u=o[f];e[u]&&t.push(u)}return n&&(t=t.concat(n)),t.join(" ")}return e});
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):e.classJoin=n()}(this,function(){"use strict";function e(e,n){for(var t=[],o=Object.keys(e),f=0,i=o.length;f<i;f++){var u=o[f];e[u]&&t.push(u)}return n&&(t=n.concat(t)),t.join(" ")}return e});

es5/index.js

@@ -17,3 +17,3 @@ (function (global, factory) {
     if (withoutConditions) {
-        classes = classes.concat(withoutConditions);
+        classes = withoutConditions.concat(classes);
     }
@@ -20,0 +20,0 @@ return classes.join(' ');

package.json

 {
   "name": "classjoin",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "A bit simpler utility for conditionally joining classNames together",
@@ -5,0 +5,0 @@ "main": "./es5/index.js",

README.md

 # classjoin
 
-A bit simpler utility for conditionally joining classNames together
+A bit simpler utility for conditionally joining classNames together.
+
+It’s simplified version of `classnames` package. The original package is not
+very lage in size, but it can be a bit simpler. Also, it has no ES-modules
+verison, and TypeScript types should be installed separately. A lot of problems
+for so small and simple package, so I vrite my own in TypeScript.
+
+There is only two options:
+
+* You can specify classes with conditions in object as first argument.  
+  If the value of the key is falsy, class won't be included in the output.
+* You can specify classes without conditions in array as second argument.
+
+If you want to take classes from several objects, just combine them useing
+`Object.assign` or spread operator and use resulting array.
+
+## Installation
+
+For bundlers and other NPM-based environments:
+
+```
+npm install --save-dev classjoin
+```
+
+## Usage
+
+The first argument of the function is object and it’s required (because it’s the
+main purpose of this package, if you want just to combine classes from array,
+you can use `.join( ' ' )`).
+
+You can use second argument to specify classes, that should be added to the
+output. This argument is not required and can be omitted. Classes from this
+array added to the output string before classes from the object (because they
+always exists).
+
+```jsx
+function MyComponent( {active, disabled, items} )
+{
+	const className = classJoin(
+		{
+			active,
+			disabled,
+			multiple: ( items.length > 1 ),
+		},
+		[
+			'my-component',
+		]
+	);
+	
+	return (
+		<div className={className}></div>
+	);
+}
+
+// <MyComponent active items={['one', 'two']} />
+// → <div class="my-component active multiple"></div>
+```
+
+### UMD
+
+UMD is default for this package, so just use something like:
+
+```js
+import classJoin from 'classjoin';
+// or
+const classJoin = require( 'classjoin' );
+```
+
+For using directly in browser (import with `<script>` tag in HTML-file):
+
+* [Development version](https://unpkg.com/classjoin/es5/index.js)
+* [Production version](https://unpkg.com/classjoin/es5/classjoin.min.js)
+
+You can use AMD or `classJoin` global variable.
+
+### ES2015 module systems
+
+Package contain `module` property for use with ES2015 module bundlers
+(like Rollup and Webpack 2).
+
+### ES2015 code base
+
+If you don't want to use transplitted to ES5 code, you can use included
+ES2015 version.
+
+You can directly import this version:
+
+```js
+import classJoin from 'classjoin/es2015';
+```
+
+Or specify alias in Webpack config:
+
+```js
+{
+	// …
+	resolve: {
+		extensions: ['.ts', '.tsx', '.js'],
+		alias: {
+			"classjoin": 'classjoin/es2015',
+		},
+	},
+};
+```
+
+## License
+
+[MIT](https://github.com/m18ru/classjoin/blob/master/LICENSE).

src/index.ts

@@ -29,3 +29,3 @@ /**
 	{
-		classes = classes.concat( withoutConditions );
+		classes = withoutConditions.concat( classes );
 	}
@@ -32,0 +32,0 @@

No alert changes

Improved metrics

Total package byte prevSize

10085

increased by34.74%

Number of lines in readme file

111

increased by2675%

No dependency changes