I see some project using classnames or classNames to apply multiple class into element. I am wondering what is difference between them and which I should use if I am under my typescript react project? From my example code, I can't see the difference
// App.tsx
import "./styles.css";
import classnames from "classnames";
import classNames from "classnames";
export default function App() {
const h1ClassName = classnames("h_classnames", { label__h1: true });
const h2ClassName = classNames("h_classNames", { label__h2: true });
return (
<div className="App">
<h1 className={h1ClassName}>I use classnames</h1>
<h1 className={h2ClassName}>I use classNames</h1>
</div>
);
}
// style.css
.App {
font-family: sans-serif;
text-align: center;
}
.h_classnames {
color: blue;
}
.h_classNames {
color: red;
}
There is no difference, it's the same function. The default export of classnames is the function, you're just providing an alias for it and importing it twice.
For example:
import "./styles.css";
import foo from "classnames";
import bar from "classnames";
export default function App() {
const h1ClassName = foo("h_classnames", { label__h1: true });
const h2ClassName = bar("h_classNames", { label__h2: true });
return (
<div className="App">
<h1 className={h1ClassName}>I use classnames</h1>
<h1 className={h2ClassName}>I use classNames</h1>
</div>
);
}