How to change the text of ribbon items in a React Spreadsheet.

This knowledge base explains how to change the text of ribbon items in a React Spreadsheet. You can achieve this by defining the locale value and assigning the localized value to the default text content in the translation object within the load function of the L10n class. For example, you can change the text content of the “Home” and “View” ribbon items in the React Spreadsheet by using your own text, as shown in the code below.

[index.js]

import { createRoot } from 'react-dom/client';
import './index.css';
import * as React from 'react';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
import { L10n } from '@syncfusion/ej2-base';

L10n.load({
   'en-US': {
       'spreadsheet': {
           'Home': 'Your own text (Home)',
           'View': 'Your own text (View)'
       }
   }
});

function Default() {
   let spreadsheet;
   return (<div className='control-section spreadsheet-control'>
       <SpreadsheetComponent ref={(ssObj) => { spreadsheet = ssObj; }} locale='en-US'>
       </SpreadsheetComponent>
   </div>
   );
}
export default Default;

const root = createRoot(document.getElementById('sample'));
root.render(<Default />); 

Stackblitz Sample: https://stackblitz.com/edit/react-ddc5gd-7vl5hk?file=index.js

Output:

For more details, please refer the following reference.

https://ej2.syncfusion.com/react/documentation/spreadsheet/global-local#localization