Getting Started with Syncfusion® React Components in a Remix

18 May 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

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

import '@syncfusion/ej2-base/styles/tailwind3.css';
import '@syncfusion/ej2-buttons/styles/tailwind3.css';
import '@syncfusion/ej2-calendars/styles/tailwind3.css';
import '@syncfusion/ej2-dropdowns/styles/tailwind3.css';
import '@syncfusion/ej2-inputs/styles/tailwind3.css';
import '@syncfusion/ej2-navigations/styles/tailwind3.css';
import '@syncfusion/ej2-popups/styles/tailwind3.css';
import '@syncfusion/ej2-splitbuttons/styles/tailwind3.css';
import '@syncfusion/ej2-notifications/styles/tailwind3.css';
import '@syncfusion/ej2-react-grids/styles/tailwind3.css';

Note: The Grid component requires CSS from multiple packages because it depends on other Syncfusion components for its full functionality.

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:

~/app/routes/home.tsx

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