Nick Taylor - Oct 23 '19 - Do not get me wrong, the classnames package is really handy. It is also quite popular with just over 3.5 million downloads per week as of the date of this blog post. Most React based projects I have worked on use it.
If you are not familiar with the classnames package, it allows you to build a set of CSS classes based on some conditionals. Straight from there documentation:
classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'
Note: true and false are used to simplify the example, but normally these would be conditional variables, methods or functions.
Having said that, JavaScript has come a long way and there are features in the language that allow us to do pretty much the same thing, specifically template strings or as it is also called, template literals.
If you are not familiar with template strings, you can build a string with variables mixed in. Let us look at the previous examples, but this time with template strings.
`foo bar` // => 'foo bar', not that exciting
`foo ${ true ? 'bar': '' }`; // => 'foo bar'
`${true ? 'foo-bar': '' }`; // => 'foo-bar'
`${ false ? 'foo-bar' : ''}` // => ''
`${ true? 'foo': '' }, { true ? 'bar': '' }`; // => 'foo bar'
`${ true ? 'foo' : ''} ${ true? 'bar' : '' }`; // => 'foo bar'
These are trivial examples, but it is just to show you that you can do pretty much the same thing with template literals. If you want to see this in action, here is an example from my site's source:
nickytonline
/
www.nickyt.co
This is the source code for the web site of Nick Taylor built using the Eleventy static site generator. It uses Andy Bell's Hylia template. I've made tweaks to it and will probably make more over time, but just wanted to give Andy a shout out for his awesome template.
npm install
npm start
npm run production
cd dist
npx serve
...
<nav
className={`navbar is-transparent ${styles.navbar}`}
role="navigation"
aria-label="main-navigation"
data-cy="nav-bar"
>
...
https://github.com/nickytonline/www.iamdeveloper.com/blob/master/src/components/Navbar.tsx#L51
This is not mind blowing code, but just another way to do it.
Happy coding!
Photo by David Rotimi on Unsplash
