How to use classnames - 10 common examples

import * as React from 'react'
import * as PropTypes from 'prop-types'

// http://lapanoid.github.io/redux-cropper/
// https://goshakkk.name/pabla/
// http://dropsofserenity.github.io/react-avatar-cropper/
// http://roadmanfong.github.io/react-cropper/example/

import { classNames } from 'classnames'

const btnClass = classNames({
    btn: true,
    'btn-pressed': true,
    'btn-over': true
})

console.log(btnClass)

// var arr = ['b', { c: true, d: false }];
// classNames('a', arr); // => 'a b c'

// let buttonType = 'primary';
// classNames({ [`btn-${buttonType}`]: true });

// classNames('foo', 'bar'); // => 'foo bar'

// classNames('foo', 'bar'); // => 'foo bar'

/* @flow */

import React from 'react';
import className from 'classnames/bind';
// import { Link } from 'react-router-dom';
import Tooltip from 'rc-tooltip';
import 'rc-tooltip/assets/bootstrap_white.css';
import { CHANGE_PROFILE_INFO_SUCCESS } from '../../constants/profileConstants/changeProfileInfo';
import globalStyles from '../../theme/global.scss';
import createNamespaceStyles from '../../containers/CreateNamespace/index.scss';

const createNamespaceClass = className.bind(createNamespaceStyles);
const globalClass = className.bind(globalStyles);

const rightContent = globalClass(
  'contentBlockContent',
  'contentBlockContentCardBlock',
  'contentBlockContentCardBlockDollars'
);

const containerLeft = createNamespaceClass(
  'namespacePlanBlockContainerLeft',
  'namespacePlanBlockDollars'
);

type Props = {
  data: Array,
  tariffName: string,

export function getClassNames( html, existingClassNames = '', allowResponsive = true ) {
	if ( ! allowResponsive ) {
		// Remove all of the aspect ratio related class names.
		const aspectRatioClassNames = {
			'wp-has-aspect-ratio': false,
		};
		for ( let ratioIndex = 0; ratioIndex < ASPECT_RATIOS.length; ratioIndex++ ) {
			const aspectRatioToRemove = ASPECT_RATIOS[ ratioIndex ];
			aspectRatioClassNames[ aspectRatioToRemove.className ] = false;
		}
		return classnames(
			existingClassNames,
			aspectRatioClassNames
		);
	}

	const previewDocument = document.implementation.createHTMLDocument( '' );
	previewDocument.body.innerHTML = html;
	const iframe = previewDocument.body.querySelector( 'iframe' );

	// If we have a fixed aspect iframe, and it's a responsive embed block.
	if ( iframe && iframe.height && iframe.width ) {
		const aspectRatio = ( iframe.width / iframe.height ).toFixed( 2 );
		// Given the actual aspect ratio, find the widest ratio to support it.
		for ( let ratioIndex = 0; ratioIndex < ASPECT_RATIOS.length; ratioIndex++ ) {
			const potentialRatio = ASPECT_RATIOS[ ratioIndex ];
			if ( aspectRatio >= potentialRatio.ratio ) {

render() {
        const {
            tagName,
            text,
            icon,
            iconPosition,
            hideText,
            url,
            target,
            rel,
            size,
            focusOutlineWeight,
            focusOutlineColor,
        } = this.props.attributes;

        let className = classnames(
            'ghostkit-button',
            size ? `ghostkit-button-${ size }` : '',
            hideText ? 'ghostkit-button-icon-only' : ''
        );

        // focus outline
        if ( focusOutlineWeight && focusOutlineColor ) {
            className = classnames( className, 'ghostkit-button-with-outline' );
        }

        className = applyFilters( 'ghostkit.blocks.className', className, {
            ...{
                name,
            },
            ...this.props,
        } );

render(): JSX.Element {
        const {
            className,
            expandedClassName,
            expanded,
            toggleExpanded,
            ...rest
        } = this.props;

        const headingClassName = classnames(className, {
            [String(expandedClassName)]: expandedClassName && expanded,
        });

        return (
            <div data-accordion-component="AccordionItemHeading">
        );
    }
}</div>

this.props.data[type].map((item, key) => {
      if (!this.state[type] && key > 1) return;
      const Data = item.split('|');
      return (
        <div>
          <div>{Data[1]}</div>
          <p>
            {Data[2]}
            {Data[3] ? ` ${Data[3]}` : null}
          </p>
        </div>
      );
    });

tabs_getRoutedItem(props = {}, tab) {
    const attributes = Util.omit(props, ["classNames"]);
    let badge = null;
    const notificationCount = NotificationStore.getNotificationCount(tab);
    const hasNotification = notificationCount > 0;
    const tabLabelClasses = classNames(
      "menu-tabbed-item-label",
      { "badge-container": hasNotification },
      props.classNames
    );
    const textClasses = classNames("menu-tabbed-item-label-text", {
      "badge-container-text": hasNotification
    });

    if (hasNotification) {
      badge = {notificationCount};
    }

    return (
      
        <span>{this.tabs_tabs[tab]}</span>
        {badge}

export default function cloneWithClasses(element, state) {
  let currentClasses = element.props.className ? element.props.className.split(' ') : [];
  let newClasses = classnames.apply(null, currentClasses.concat(getClasses(state)));
  const newElement = React.cloneElement(element, {
    className: newClasses,
    transitionState: state
  });
  return newElement;
}

(realActiveDirection === 'top' ||
                        realActiveDirection === 'bottom')))
        ) {
            realActiveDirection = null;
        }

        if (!newIconOnly && realActiveDirection === undefined) {
            realActiveDirection =
                direction === 'hoz'
                    ? 'bottom'
                    : type === 'line'
                    ? 'right'
                    : 'left';
        }

        const cls = classNames({
            [`${prefix}nav`]: true,
            [`${prefix}${type}`]: type,
            [`${prefix}active`]: realActiveDirection,
            [`${prefix}${realActiveDirection}`]: realActiveDirection,
            [`${prefix}icon-only`]: newIconOnly,
            [`${prefix}no-arrow`]: !hasArrow,
            [`${prefix}nav-embeddable`]: embeddable,
            [className]: !!className,
        });
        const newStyle = newIconOnly ? { ...style, width: '58px' } : style;

        const props = {
            prefix,
            direction,
            openMode,
            triggerType,

const Date = (props) => {
  const { className, children, inline } = props
  const classes = classNames('date', className)

  if(inline) {
    return <span>{children}</span>
  } else {
    return <div>{children}</div>
  }
}