react-classnamed
TypeScript icon, indicating that this package has built-in type declarations

1.0.1 • Public • Published

react-classnamed

Utility React component for using great classnames package.

Installation

npm

npm install react-classnamed --save

yarn

yarn add react-classnamed

Examples

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

This produces:

<div class="foo bar">Foo Bar</div>

Useful when creating core components which alow custom styles.

If we create PrimaryButton component

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 };

We can use it like this:

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

Which results in this HTML:

<button class="primary-button custom-button active">Hello world</button>

Package Sidebar

Install

npm i react-classnamed

Weekly Downloads

1

Version

1.0.1

License

MIT

Unpacked Size

24.5 kB

Total Files

15

Last publish

Collaborators

  • asmailov