Skip to content

## Conditional ​

Use HTML conditional comments effortlessly

## Install ​

Install the component from your command line

pnpmbunnpmyarn
console

    pnpm add jsx-email

    pnpm add jsx-email

console

    bun add jsx-email

    bun add jsx-email

console

    npm add jsx-email

    npm add jsx-email

console

    yarn add jsx-email

    yarn add jsx-email

## Usage ​

Add the component to your email template. Include styles where needed.

jsx

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

    const Email = () => {
      return (
        <Head>
          <Conditional mso={true}>
            <meta content="batman" />
          </Conditional>
        </Head>
      );
    };

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

    const Email = () => {
      return (
        <Head>
          <Conditional mso={true}>
            <meta content="batman" />
          </Conditional>
        </Head>
      );
    };

## Component Props ​

ts

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

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

INFO

The `expression` prop or the `mso` prop must be defined, but not both.

### Props ​

ts

    expression?: string;

    expression?: string;

If provided, the string will be used as the conditional expression within the HTML comment. e.g. a value of `lt ie 10` would result in a conditional comment block starting with `<!--[if lt ie 10]>`.

ts

    mso?: boolean;

    mso?: boolean;

If `true`, the conditional comment begins with `<!--[if mso]>`. If `false`, the conditional comment block uses a common hack and appears as `<!--[if !mso]><!--> ... <!--<![endif]-->`.