CODEWITHSUNDEEP
javascriptcssreactjstypescriptclassname
jacobcan118
jacobcan118

Reputation: 9109

what is difference between classnames vs classNames from classnames package

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

codesandbox

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

Upvotes: 0

Views: 1205

Answers (1)

Evan Trimboli
Evan Trimboli

Reputation: 30092

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

Upvotes: 2

Related Questions