Getting Started with Syncfusion® React Components in a Remix

6 Jul 20265 minutes to read

This guide provides a step-by-step workflow for integrating Syncfusion® React components into a new Remix application.

Prerequisites

Ensure the following requirements are met before starting:

System requirements for Syncfusion® React UI components

Create Remix application

To set up a basic Remix sample, run the following command:

npx create-react-router@latest

The create-react-router@latest command create a remix app using the latest package versions.

When you run this command, you will be asked the following questions.

dir  :: Where should we create your new project?
        quick-start

        ◼  Using basic template See https://remix.run/guides/templates for more
        ✔  Template copied

git  :: Initialize a new git repository?
        No

deps :: Install dependencies with npm?
        Yes

Navigate into the project directory with:

cd quick-start

Adding Syncfusion® Grid package

Syncfusion® React packages are available at npmjs.com. To include the React Grid component in your project, use the following command:

npm install @syncfusion/ej2-react-grids --save

Adding CSS reference

Syncfusion® React component provide built-in themes, which are available from the npm theme packages. Additionally, themes can be loaded via CDN or customized using the Theme Studio. For more information, refer to the themes documentation.

This example uses the Tailwind 3 theme for the Grid component from the theme package. To install the Tailwind 3 theme package, use the following command:

npm install @syncfusion/ej2-tailwind3-theme --save
yarn add @syncfusion/@syncfusion/ej2-tailwind3-theme

Import the Syncfusion® component themes in the ~/app/routes/home.tsx file as shown below:

@import "@syncfusion/ej2-tailwind3-theme/styles/grid/index.css";

Configure Server-Side Rendering (SSR)

For Syncfusion® React packages to function with Remix server-side rendering (via Vite), update your vite.config.ts file as shown:

import { defineConfig } from "vite";

export default defineConfig({
  ...
  ssr: {
    noExternal: [/@syncfusion/]
  },
  ...
});

This configuration ensures Syncfusion modules are properly transpiled for SSR compatibility.

Adding React Grid component

Now, you can add Syncfusion® React components in the Remix application. Add the React Grid component in ~/app/routes/home.tsx file using the following code:

import { ColumnDirective, ColumnsDirective, GridComponent, Inject, Page, Sort } from '@syncfusion/ej2-react-grids';

export let meta = () => {
  return [{
    title: "Syncfusion Grid Remix",
    description: "Syncfusion Grid components with Remix",
  }];
};

export default function Index() {
    let data: Object[] = [
      {
          OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
          ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
          ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
      },
      {
          OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
          ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
          ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
      },
      {
          OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
          ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
          ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
      }
  ];
  return (
    <GridComponent dataSource={data} allowPaging={true}>
      <ColumnsDirective>
        <ColumnDirective field="OrderID" width="100" textAlign="Right" />
        <ColumnDirective field="CustomerID" width="100" />
        <ColumnDirective field="EmployeeID" width="100" textAlign="Right" />
        <ColumnDirective field="Freight" width="100" format="C2" textAlign="Right"/>
        <ColumnDirective field="ShipCountry" width="100" />
      </ColumnsDirective>
      <Inject services={[Page, Sort]} />
    </GridComponent>
  );
}

Run the application

Start your Remix application in development mode:

npm run dev

For deployment, build your app for production,

npm run build

Then run the app in production mode:

npm run start

View source code