Skip to main content

Installation

The React package ships as @unlayer/react-elements.

Install​

npm install @unlayer/react-elements
# or
pnpm add @unlayer/react-elements
# or
yarn add @unlayer/react-elements

Peer Dependencies​

PeerVersion
react>= 18
react-dom>= 18

If your project doesn't already depend on them:

npm install react react-dom

TypeScript​

The package is written in TypeScript and ships its own type definitions. No @types/* install is required. You can import any exported type:

import type {
  ButtonProps,
  EmailProps,
  PageProps,
  DocumentProps,
  RowProps,
  ColumnLayout,
  HtmlParts,
} from '@unlayer/react-elements';

tsconfig.json​

The docs use the modern JSX runtime ("jsx": "react-jsx"), so the examples don't need a React import in every file. Your tsconfig should enable it:

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "target": "ES2020",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  }
}

Without "jsx": "react-jsx" (or an equivalent build-tool setting), the compiler falls back to the classic runtime, which expects React.createElement to be in scope. Running a sample with tsx against an empty project will throw ReferenceError: React is not defined. Add the tsconfig above, or add import React from 'react'; at the top of every .tsx file.

Module Format​

@unlayer/react-elements is published as ESM ("type": "module") with a CommonJS fallback, marked sideEffects: false so unused components tree-shake in production bundles.

FieldValue
ESM entrydist/index.js
CJS entrydist/index.cjs
Typesdist/index.d.ts

Works out of the box with Vite, Webpack 5, esbuild, Rollup, Next.js, and Remix, including Server Components.

Server Components​

The package is compatible with React Server Components (Next.js App Router, Remix). Render functions are synchronous and pure, and <Body> reads its config from a config prop rather than React Context, so it doesn't need <UnlayerProvider> on the server. See Configuration for details.

Verify the Install​

import {
  Email,
  Row,
  Column,
  ColumnLayouts,
  Paragraph,
  renderToHtml,
} from '@unlayer/react-elements';

const html = renderToHtml(
  <Email>
    <Row layout={ColumnLayouts.OneColumn}>
      <Column>
        <Paragraph>It works!</Paragraph>
      </Column>
    </Row>
  </Email>,
);

console.log(html);

If you see an HTML string, you're set. Continue to the Quickstart.