And while the performance gains might not be noticeable, it still means that there’s speed left on the table, and the multitude of calls can quickly add up to something more. The API is identical to the classNames one, but without the additional versions (which you probably don’t need anyway).
It’s a similar library to classNames, but a bit more fresh-y, and with even fewer LOCs.
YOU DONT KNOW JS CONFUSING FREE
Now, as a free tip to at least 2x the performance of the thousands of classNames calls you probably make, just switch to clsx. With that said, you should only use this version when you have a lot, and I mean a lot, of CSS module-imported classes to deal with (which you shouldn’t, by the way, it’s not “ergonomic”) Just use clsx However, it does introduce some additional performance loss (although really tiny), can confuse new-comers, requires creating a new “instance” of classNames function, and will cause you to lose potential autocompletion and other kinds of editor support ( included TypeScript typings are very generic). This method can save you some typing - no need to always access the properties from the imported object. import classNames from "classnames/bind" When importing your object of CSS classes, this version allows you to “bind” them so that you can reference them by their custom name instead of the real one. The second version is targeted towards users of CSS Modules. It still can be useful for generic string concatenation, though. Because of that, I don’t really recommend you use it for your classNames unless you’ve got a really specific reason. The README does a great job of showcasing this versatility: import classNames from "classnames" Ĭonst arr = ["b", ) // => 'bar'ĭue to the complexity of deduping, this version is said to be 5x slower. All it is is a single function, taking different types of values as arguments and spitting out a single string based on them. The usefulness of the classNames library comes from its syntax. Besides, the library is very stable and has proven itself over the years. This is what I consider a “sane” threshold for package dependence. Even though you might not depend on such packages directly, packages that you depend on might do so, one, or more likely, multiple levels deep.ĬlassNames isn’t exactly that tiny, with around 50 LOCs at its “core” version and between 200 - 300 in total (all versions + TypeScript typings). The jokes about black-hole node_modules folders are true for a reason.
Now, such dependence might seem scary, and rightfully so. Return !!obj & (typeof obj = 'object' || typeof obj = 'function') & typeof obj.then = 'function'
YOU DONT KNOW JS CONFUSING CODE
Take is-promise for example - sitting at around 10M weekly downloads (mainly from its highly-popular dependents) - with its largest CJS version measuring 5 lines of code (LOCs): module.exports = isPromise You most likely have heard the stories of NPM packages with even less than 20 lines of code, breaking the internet because of the slightest change.
YOU DONT KNOW JS CONFUSING DOWNLOAD
It’s not uncommon to see tiny packages have insanely high download stats on NPM. After all, given classNames and React popularity, there’s a high chance that you’ve used it before.
The novelty of tiny NPM packagesīut you most likely know it all. classNames and React popularity growthĪs the name implies, it’s primarily meant for dealing with CSS classNames (very common in React and any other JSX-based UI framework), although you can use it for any kind of string concatenation. This tiny open-source library, originally created by JedWatson, is nothing but a versatile string “concatenator.” Currently sitting at over 6M weekly downloads, it rose to popularity alongside React - the UI library that it’s most commonly used with. Let me contradict the very title of this post from the start by saying that you probably know the classNames library very well.