import { ClassNamed } from 'react-classnamed';
 
const element = (
  <ClassNamed className={['foo', { bar: true, test: false }]}>
    {(mergedClassName) => (
      <div className={mergedClassName}>Foo Bar</div>
    )}
  </ClassNamed>
);

import * as React from 'react';
import ClassNamed, { IClassNamed } from 'react-classnamed';
 
interface IProps extends IClassNamed {
    onClick?(): void;
}
 
const PrimaryButton: React.SFC<IProps> = ({ className, onClick, children }) => (
  <ClassNamed className={['primary-button', className]}>
    {(mergedClassName) => (
      <button className={mergedClassName} onClick={onClick}>
        {children}
      </button>
    )}
  </ClassNamed>
);
 
export { PrimaryButton, IProps as IPrimaryButtonProps };

<PrimaryButton className={["custom-button", { active: true }]}>
  Hello world
</PrimaryButton>