tsx-conditionals

Express your conditional rendering logic in JSX/TSX

Usage no npm install needed!

<script type="module">
  import tsxConditionals from 'https://cdn.skypack.dev/tsx-conditionals';
</script>

README

TSX Conditionals

Example

Codesandbox

tsx conditionals exposes two components:

For & If

Purpose

  • Eliminate exposed control flow logic in your components
  • Reduce mixing Javascript/Typescript and JSX/TSX in a view component
  • Improve readability

For replaces:

  • {data.map(item => <Component key={item.key} />)}
  • {data && data.map(item => <Component key={item.key} />)}

If replaces:

  • {open && <Component />}
  • {open ? <ComponentA /> : <ComponentB />}

Props

For props:

  • data: T[] | null
  • render: (item: T) => JSX.Element | React.FC

If props:

  • cond: boolean
  • then: JSX.Element
  • orElse: JSX.Element | null