use-classnames v1.0.2

use-classnames

A hook to use classnames as a React hook to manipulate css classes.

Installation

npm install classnames use-classnames

Usage

import React from 'react';
import useClassNames from 'use-classnames';
import css from './Button.module.css';

export const Button = ({
	children,
	className,
	classes,
}) => {
	const [styles, $] = useClassNames(css, classes);
	return (
		<button className={$(styles.button, className)}>
			<i className={styles.icon} />
			<span className={styles.text} children={children} />
		</button>
	);
};

export default Button;

inheriting

import React from 'react';
import useClassNames from 'use-classnames';
import css from './Nav.module.css';

export const Nav = ({
	className,
	classes,
}) => {
	const [styles, $] = useClassNames(css, classes);
	return (
		<nav className={$(styles.nav, className)}>
			<Button
				className={styles.navButton}
				classes={{ icon: styles.navButtonIcon }}>
				Home
			</Button>
		</nav>
	);
};

export default Nav;

License

〰️〰️ MIT