OFRBG / condicional

Maybe better conditionals feat. tagged template literals

condicional

Maybe better conditionals
Report Bug · Request Feature

About The Project

⚠️ `condicional` is based on a PEG grammar and is not battle-tested.

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.

(back to top)

Package Details

• npm
• Bundlephobia

(back to top)

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
`

Installation

pnpm add condicional

(back to top)

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

condicional stores your functions, so you can create stable conditional components

const isError = ({ type }) => type === 'error'
const isWarning = ({ type }) => type === 'warning'

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

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

// <StatusIcon type="error" size="small" /> renders <ErrorIcon type="error" size="small" />