react-extras - npm Package Compare versions

Comparing version 0.3.0 to 0.4.0

dist/index.js

		@@ -6,3 +6,3 @@ 'use strict';
		});
		exports.BodyClass = exports.RootClass = exports.If = exports.autoBind = undefined;
		exports.canUseDOM = exports.BodyClass = exports.RootClass = exports.If = exports.classNames = exports.autoBind = undefined;

		@@ -24,2 +24,22 @@ var _react = require('react');
		const autoBind = exports.autoBind = _autoBind3.default.react; /* eslint-disable no-unused-vars */
		const classNames = exports.classNames = (...args) => {
		const ret = new Set();

		for (const item of args) {
		const type = typeof item;

		if (type === 'string' && item.length > 0) {
		ret.add(item);
		} else if (type === 'object' && item !== null) {
		for (const [key, value] of Object.entries(item)) {
		if (value) {
		ret.add(key);
		}
		}
		}
		}

		return [...ret].join(' ');
		};

		const If = exports.If = props => props.condition ? props.render ? props.render() : props.children : null;
		@@ -41,3 +61,3 @@ If.propTypes = {

		if (this.props.remove) {
		if (remove) {
		classList.remove(...remove.trim().split(' '));
		@@ -51,7 +71,7 @@ }

		if (this.props.add) {
		if (add) {
		classList.remove(...add.trim().split(' '));
		}

		if (this.props.remove) {
		if (remove) {
		classList.add(...remove.trim().split(' '));
		@@ -86,2 +106,4 @@ }
		exports.BodyClass = BodyClass;
		BodyClass.propTypes = ElementClass.propTypes;
		BodyClass.propTypes = ElementClass.propTypes;

		const canUseDOM = exports.canUseDOM = typeof window !== 'undefined' && 'document' in window && 'createElement' in window.document;

package.json

		{
		"name": "react-extras",
		"version": "0.3.0",
		"version": "0.4.0",
		"description": "Useful components and utilities for working with React",
		@@ -14,3 +14,3 @@ "license": "MIT",
		"engines": {
		"node": ">=6"
		"node": ">=8"
		},
		@@ -38,3 +38,7 @@ "scripts": {
		"bind",
		"class"
		"class",
		"css",
		"classname",
		"classnames",
		"classes"
		],
		@@ -41,0 +45,0 @@ "dependencies": {

readme.md

		@@ -35,2 +35,53 @@ # react-extras [![Build Status](https://travis-ci.org/sindresorhus/react-extras.svg?branch=master)](https://travis-ci.org/sindresorhus/react-extras)

		### classNames(…input)

		Conditionally join CSS class names together.

		#### input

		Type: `string` `Object`

		Accepts a combination of strings and objects. Only object keys with truthy values are included. Anything else is ignored.

		```js
		classNames('unicorn', 'rainbow');
		//=> 'unicorn rainbow'

		classNames({awesome: true, foo: false}, 'unicorn', {rainbow: false});
		//=> 'awesome unicorn'

		classNames('unicorn', null, undefined, 0, 1, {foo: null});
		//=> 'unicorn'

		const buttonType = 'main';
		classNames({[`button-${buttonType}`]: true});
		//=> 'button-main'
		```

		```jsx
		const Button = props => {
		console.log(props);
		/*
		{
		type: 'success',
		small: true
		}
		*/

		const buttonClass = classNames(
		'button',
		{
		[`button-${props.type}`]: props.type,
		'button-block': props.block,
		'button-small': props.small
		}
		);

		console.log(buttonClass);
		//=> 'button button-success button-small'

		return <button className={buttonClass}>…</button>;
		};
		```

		### `<If>`
		@@ -104,3 +155,7 @@

		### canUseDOM

		A boolean of whether you're running in a context with a [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction). Can be used to check if your component is running in the browser or if it's being server-rendered.


		## Related
		@@ -107,0 +162,0 @@

New alerts