TLTR; See it in action [https://github.com/isaozler/tagged-templates-io]
Once again, I was working on a dragon component. Based on the transition and loading state the class names should change for custom transition and loading states. There is a really nice package classnames [https://github.com/JedWatson/classnames], but most of the time I find myself stating the class name between two values. If it's true ? '--visible' : '--hidden'.
const transitionClass = `app__overlay--${isTransitioning ? 'trans-start' : 'trans-end'}` const loadingClass = `app__overlay--${isLoading ? 'visble' : 'hidden'}` const stateClasses = [transitionClass, loadingClass].join(' '); # React Sample <div className={`app__overlay ${stateClass}`} /> Problem
This does the job actually, but is quite messy, not an elegant solution and not reusable. As I mentioned earlier in the classname package you can do this;
className({ foo: true }) // => 'foo' But, then you have to do another object to get the opposite state.
const stateClass = className({ 'app__overlay--visible': isLoading, 'app__overlay--hidden': !isLoading, 'app__overlay--trans-start': isTransitioning, 'app__overlay--trans-end': !isTransitioning, }); <div className={stateClass} /> Solution
Of course, there is always room for improvement. But for now, I ended up with a very lightweight package making at least my life easier.
const stateClass = taggedTemplatesIo( `{0} {0}--{1} {0}--{2}`, [ ['app__overlay'], ['trans-start','trans-end'], ['visble','hidden'], ], [true, isTransitioning, isLoading] ); # React Sample <div className={stateClass} /> GraphQL / SQL interpolations
You can always use this for other implementations of course. It was very useful for me with GraphQL / SQL interpolations. To give you an example;
SQL
const isClient = true; const as = 'age'; const from = ['clientTable', 'relationTable']; const fromCondition = isClient; const where = `${as} = ${42}`; const start = 0, end = 10; taggedTemplates(` SELECT {select} AS {as} FROM {from} WHERE {where} LIMIT {start}, {end} `, { select: 'age_col', as, from, where, start, end }, { from: fromCondition }, ) // Outputs SELECT age_col AS age FROM clientTable WHERE age = 42 LIMIT 0, 10 Conclusion
With this lightweight simple helper, I can write cleaner, easier to maintain code blocks. Hope it helps others too!
Top comments (0)