Globalization

The globalization process combines the translation of component messages with adapting them to specific locales.

For more information on how globalization practices are implemented in KendoReact, refer to the overview article. For more information on the globalization aspects which are available for each component, refer to the article on globalization support.

Right-to-Left Support

The following example demonstrates how to utilize the RTL support for the ProgressBar and ChunkProgressBar components.

const App = () => {
    const value = 55;
    const chunks = 5;

    return (
        <div className="container" dir="rtl">
            <div className="row">
                <div className="col-sm mb-2">
                    ProgressBar
                </div>
                <div className="col-sm mb-2">
                    Chunk ProgressBar
                </div>
            </div>
            <div className="row">
                <div className="col-sm">
                    <ProgressBar value={value} />
                </div>
                <div className="col-sm">
                    <ChunkProgressBar value={value} chunkCount={chunks}/>
                </div>
            </div>
            <div className="row">
                <div className="col-sm">
                    <div>Value: <strong>{value}</strong></div>
                    <div>Chunk count: <strong>{chunks}</strong></div>
                </div>
            </div>
        </div>
    );
};

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);