About The Project

Often times there's some mapping logic that needs to be applied to components to return values. Simple mappings can be achieved with a plain object. Adding a default value commonly adds an edge case. Things get more complicated once logic needs to be applied to an input e.g. the input is odd. The uncommon but existing case is nesting logic for checks. The tool that most resembles what comfortably covers these cases is Ramda's cond and its derivatives. However, it lacks feature richness and suffers from array overload.

Package Details

• npm
• Bundlephobia

Getting Started

condicional uses tagged template literals to combine runtime data and static pieces in a single, concise mapper. The syntax in a nutshell is

cond`
  static_value_1 result_1
  static_value_2 result_2
  ${isEven} {
    static_value_3 result_3
    fallback_1
  }
  fallback
`

condicional stores your functions, so you can create conditional components

const mapper = cond<JSXElementConstructor>`
  ${isError} ${ErrorIcon} 
  ${isWarning} ${WarningIcon}
  ${OfflineIcon}
`

const StatusIcon = (props) => {
  const Component = mapper(props)
  return <Component {...props} />
}

Installation

pnpm add condicional

Basic Usage

Just import cond from condicional and build your mapper.

const mapper = cond`
  ${isEven} 0
  ${isOdd} 1
  ${'not an integer'}
`

mapper(10) === '0' // true
mapper(5) === '1' // true
mapper(0.5) === 'not an integer' // true