🔴 Ternup
Functional ternaries
Ternaries can get pretty messy, especially when trying to combine them with template literals in CSS-in-JS. Ternup
allows you to skip the false case in favor of automatically returning an empty string.
This is extreme bike-shedding and may create more noise than it removes. Ternup's main objective is to remove the floating ?
and :
that may get lost in the template literal noise.
API
tu(condition, fallback)(expr1, expr2) -> expr1 || expr2 || fallback
First function
condition ( required )
An expression that evaluates to true or false.
fallback ( optional )
Optional expression for expr1
/ expr2
to fallback to.
Defaults to an empty string (""
).
Second function
expr1 ( optional )
An expression that returns when condition
is truthy.
expr2 ( optional )
An expression that returns when condition
is falsy.
Examples
Styled Components
const styled = ;const tu = ; // Simple example with no false argument.const oneLine = styleddiv` font-size: 30px; `const oneLineWithTernup = styleddiv` font-size: 30px; `
Complex Styled Components example
const styled = ;const tu = ; const multiLine = styleddiv` ;`; const multiLineWithTernup = styleddiv` ;`;
Reusable function
const tu = ; const sayHello = { const isGil = ; return ` , `} //-> "\n Oh, hello Gil Faison\n, Charmed I'm sure\n" //-> "\n Hi Dave Garwacke\n, Welcome to FooBarBaz!\n"