Appearance

Conditional ​

Use HTML conditional comments effortlessly

Install ​

Install the component from your command line

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
head?: boolean;
head?: boolean;

If true, the conditional expression will be placed in the head section of your email template.

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]-->.