Skip to content
JSX email

Conditional

Use HTML conditional comments effortlessly

Install

Install the component from your command line

Terminal window
pnpm add jsx-email

Usage

ConditionalExample.jsx
import { Conditional, Head } from 'jsx-email';


const Email = () => {
  return (
    <Head>
      {/* MSO-specific content */}
      <Conditional mso={true}>
        <meta content="mso-content" />
      </Conditional>


      {/* Custom conditional */}
      <Conditional expression="lt ie 10">
        <meta content="legacy-ie" />
      </Conditional>
    </Head>
  );
};

Props

TypeScript Interface

interface ConditionalProps {
  children?: React.ReactNode;
  expression?: string;
  mso?: boolean;
}

Optional Props

expression

expression?: string;

Custom conditional expression for HTML comment. Example: 'lt ie 10' produces <!--[if lt ie 10]>.

head?: boolean;

Places the conditional in the email template’s head section.

mso

mso?: boolean;
  • When true: Outputs <!--[if mso]>
  • When false: Outputs <!--[if !mso]><!--> ... <!--<![endif]-->

Children Props

children?: React.ReactNode;

Content to be wrapped in the conditional comment.