/ S

This page covers a next version of Handsontable, and is not published yet.

This page covers a non-latest version of Handsontable.

# Language change in React

# Overview

The following example implements the @handsontable/react component with the option to change the Context Menu language configured. Select a language from the selector above the table and open the Context Menu to see the result.

TIP

Note that the language property is bound to the component separately using language={this.language}", but it could be included in the settings property just as well.

# Example

import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { HotTable } from '@handsontable/react';
import { getLanguagesDictionaries } from 'handsontable/i18n';
import { registerAllModules } from 'handsontable/registry';
import { createSpreadsheetData } from './helpers';

// register Handsontable's modules
registerAllModules();

const hotSettings = {
  data: createSpreadsheetData(5, 10),
  colHeaders: true,
  rowHeaders: true,
  contextMenu: true,
  height: 'auto',
  licenseKey: 'non-commercial-and-evaluation'
};

const App = () => {
  const [language, setLanguage] = useState('en-US');
  const [languageList, setLanguageList] = useState([]);

  useEffect(() => {
    setLanguageList(getLanguagesDictionaries());
  }, []);

  const updateHotLanguage = event => {
    setLanguage(event.target.value);
  };

  return (
    <div>
      <label htmlFor="languages">Select language:
        {' '}
        <select value={language} onChange={updateHotLanguage} id="languages">
          {languageList.map(({ languageCode }) => (
            <option key={languageCode} value={languageCode}>
              {languageCode}
            </option>
          ))}
        </select>
      </label>

      <br/>
      <br/>

      <HotTable language={language} settings={hotSettings}/>
    </div>
  );
}

ReactDOM.render(<App/>, document.getElementById('example1'));

← Redux example →