# Localization

Language: English (en)

This sample demonstrates localizing the UI and switching language at runtime. A locale is registered with `addLocale`, and the language is selected through the `lang` prop. Use the dropdown below the player to switch between English and Dutch. See also the [localization guide](https://docs-preview.optiview.dolby.com/pr-873/theoplayer/how-to-guides/web/ui/open-video-ui/react/guides/localization.md).

Code

```jsx
import { useState } from 'react';
import { DefaultUI, addLocale } from '@theoplayer/react-ui';

const configuration = {
    libraryLocation: '/path/to/theoplayer/',
    license: 'your_theoplayer_license'
};

const source = {
    sources: { src: 'https://cdn.theoplayer.com/video/big_buck_bunny/big_buck_bunny.m3u8' },
    metadata: { title: 'Big Buck Bunny' }
};

// Register the Dutch locale. Untranslated messages fall back to the built-in English defaults.
addLocale('nl', {
    playAria: 'afspelen',
    pauseAria: 'pauzeren',
    languageMenuHeading: 'Taal',
    subtitleMenuHeading: 'Ondertitels',
    subtitleOff: 'Uit',
    settingsMenuHeading: 'Instellingen'
    // ...
});

const App = () => {
    const [lang, setLang] = useState('en');
    return (
        <>
            <DefaultUI configuration={configuration} source={source} lang={lang} />
            <select value={lang} onChange={(event) => setLang(event.target.value)}>
                <option value="en">English</option>
                <option value="nl">Nederlands (Dutch)</option>
            </select>
        </>
    );
};
```

[📜 View full source on GitHub](https://github.com/THEOplayer/web-ui/blob/main/docs/static/open-video-ui/v2/examples/react/localization/demo.html)