This section explains how to migrate the Toolbar component from EJ2 React to React. It provides a detailed comparison of APIs, including props, methods and events.
| EJ2 React | React | Description |
|---|
Props: allowKeyboard <ToolbarComponent id='toolbar' allowKeyboard={true}>
<ItemsDirective>
<ItemDirective text="Cut" />
<ItemDirective text="Copy" />
</ItemsDirective>
</ToolbarComponent> | Props: keyboardNavigation <Toolbar keyboardNavigation={true}>
<ToolbarItem>
<Button title="Cut" />
</ToolbarItem>
<ToolbarItem>
<Button title="Copy" />
</ToolbarItem>
</Toolbar> | The allowKeyboard property in EJ2 React has been renamed to keyboardNavigation in React. |
Props: cssClass <ToolbarComponent id='toolbar' cssClass='e-toolbar'>
<ItemsDirective>
<ItemDirective text="Cut" />
<ItemDirective text="Copy" />
</ItemsDirective>
</ToolbarComponent> | Props: className <Toolbar className='e-toolbar'>
<ToolbarItem>
<Button title="Cut" />
</ToolbarItem>
<ToolbarItem>
<Button title="Copy" />
</ToolbarItem>
</Toolbar> | The cssClass prop in EJ2 React is replaced with the standard React className prop in React. |
Props: enableCollision <ToolbarComponent id='toolbar' enableCollision={true}>
<ItemsDirective>
<ItemDirective text="Cut" />
<ItemDirective text="Copy" />
</ItemsDirective>
</ToolbarComponent> | Props: collision <Toolbar collision={true}>
<ToolbarItem>
<Button title="Cut" />
</ToolbarItem>
<ToolbarItem>
<Button title="Copy" />
</ToolbarItem>
</Toolbar> | The enableCollision property in EJ2 React has been renamed to collision in React. |
Props: overflowMode <ToolbarComponent id='toolbar' overflowMode="multiRow">
<ItemsDirective>
<ItemDirective text="Cut" />
<ItemDirective text="Copy" />
</ItemsDirective>
</ToolbarComponent> | Props: overflowMode <Toolbar overflowMode={OverflowMode.MultiRow}>
<ToolbarItem>
<Button title="Cut" />
</ToolbarItem>
<ToolbarItem>
<Button title="Copy" />
</ToolbarItem>
</Toolbar> | The overflowMode prop is supported in both EJ2 React and React. |
Props: scrollStep <ToolbarComponent id='toolbar' scrollStep={50}>
<ItemsDirective>
<ItemDirective text="Cut" />
<ItemDirective text="Copy" />
</ItemsDirective>
</ToolbarComponent> | Props: scrollStep <Toolbar scrollStep={50}>
<ToolbarItem>
<Button title="Cut" />
</ToolbarItem>
<ToolbarItem>
<Button title="Copy" />
</ToolbarItem>
</Toolbar> | The scrollStep prop is supported in both EJ2 React and React. |
| EJ2 React | React | Description |
|---|
Methods: destroy() <ToolbarComponent id="toolbar"
shape= 'Circle'
ref={(scope) => {
this.toolbarObj = scope
} />
constructor(props: {}) {
this.toolbarObj.destroy();
}}
| useEffect(() => {
return () => {
console.log('destroyed');
};
}, []);
<Toolbar >
<ToolbarItem>
<Button title="Cut" />
</ToolbarItem>
<ToolbarItem>
<Button title="Copy" />
</ToolbarItem>
</Toolbar>
| The destroyed callback event in EJ2 React is not available in React components. Instead, use the cleanup function returned by React useEffect hook to execute logic on component unmount. |
Methods: refreshOverflow() <ToolbarComponent id="toolbar"
ref={(scope) => {
this.toolbarObj = scope
} />
constructor(props: {}) {
this.toolbarObj.refreshOverflow();
}}
| <Button onClick={this.toolbarInstance.refreshOverflow()}>
Button </Button>
<Toolbar ref={toolbar => this.toolbarInstance = toolbar} /> | The refreshOverflow() method is supported in both EJ2 React and React. |