Sidebar Migration - Syncfusion® React

This section explains how to migrate the Sidebar component from EJ2 React to React. It provides a detailed comparison of APIs, including props and events.

Properties

EJ2 React	React	Description
Props: `animate` `<SidebarComponent animate={true}></SidebarComponent>`	Props: `transition` `<Sidebar transition={{ enter: 300, exit: 300 }}></Sidebar>`	The `animate` prop in EJ2 React is replaced with the `transition` prop in React.
Props: `closeOnDocumentClick` `<SidebarComponent closeOnDocumentClick={true}></SidebarComponent>`	Props: `closeOnDocumentClick` `<Sidebar closeOnDocumentClick={true}></Sidebar>`	The `closeOnDocumentClick` prop is supported in both EJ2 React and React.
Props: `enableDock` `<SidebarComponent enableDock={true}></SidebarComponent>`	Props: `dockable` `<Sidebar dockable={true}></Sidebar>`	The `enableDock` prop in EJ2 React is replaced with the `dockable` prop in React.
Props: `dockSize` `<SidebarComponent dockSize="48px"></SidebarComponent>`	Props: `dockableWidth` `<Sidebar dockableWidth="48px"></Sidebar>`	The `dockSize` prop in EJ2 React is replaced with the `dockableWidth` prop in React.
Props: `enableRtl` `<SidebarComponent enableRtl={true}></SidebarComponent>`	Props: `dir` `<Provider dir='rtl'><Sidebar></Sidebar></Provider>`	The `enableRtl` prop in EJ2 React is replaced in React by wrapping the component with a `Provider` that includes the `dir` attribute to enable RTL support.
Props: `isOpen` `<SidebarComponent isOpen={true}></SidebarComponent>`	Props: `open` `<Sidebar open={true}></Sidebar>`	The `isOpen` prop in EJ2 React is replaced with the `open` prop in React.
Props: `mediaQuery` `<SidebarComponent mediaQuery="(min-width: 600px)"></SidebarComponent>`	Props: `mediaQuery` `<Sidebar mediaQuery="(min-width: 600px)"></Sidebar>`	The `mediaQuery` prop is supported in both EJ2 React and React.
Props: `position` `<SidebarComponent position="Left"></SidebarComponent>`	Props: `position` `<Sidebar position="Left"></Sidebar>`	The `position` prop is supported in both EJ2 React and React.
Props: `showBackdrop` `<SidebarComponent showBackdrop={true}></SidebarComponent>`	Props: `backdrop` `<Sidebar backdrop={true}></Sidebar>`	The `showBackdrop` prop in EJ2 React is replaced with the `backdrop` prop in React.
Props: `type` `<SidebarComponent type="Push"></SidebarComponent>`	Props: `mode` `<Sidebar mode="Push"></Sidebar>`	The `type` prop in EJ2 React is replaced with the `mode` prop in React.

Events

EJ2 React	React	Description
Event: `change` / `open` / `close` `const handleChange = (args) => { console.log("Sidebar state changed"); }; <SidebarComponent change={(e) => handleChange(e)}></SidebarComponent>`	Event: `onOpenChange` `const handleChange = (args) => { console.log("Sidebar state changed"); }; <Sidebar onOpenChange={(e) => handleChange(e)}></Sidebar>`	The `change`, `open` and `close` event in EJ2 React is replaced with the `onOpenChange` event in React.