How to Achieve Indian Format in React NumericTextBox

This article explains how to achieve Indian format in React NumericTextBox. To format numeric values in accordance with the Indian numbering system, where commas are placed after every two digits, you can utilize the en-IN culture setting. This ensures that the numeric values are displayed correctly according to Indian conventions. Below is a detailed implementation guide along with a code snippet for reference.

import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import React from 'react';
import {
  L10n,
  loadCldr,
} from "@syncfusion/ej2-base";
import './App.css';

// Load CLDR data
loadCldr(
  require('cldr-data/supplemental/numberingSystems.json'),
  require('cldr-data/main/en-IN/ca-gregorian.json'),
  require('cldr-data/main/en-IN/numbers.json'),
  require('cldr-data/main/en-IN/currencies.json'),
  require('cldr-data/main/en-IN/timeZoneNames.json')
);

// Load localization for numeric textbox
L10n.load({
   'en-IN': {
        'numerictextbox': {
          placeholder: 'Enter value'
        }
      }
});

function App() {
    return (
      <div style={{marginTop: '100px'}}>
        <NumericTextBoxComponent 
          locale="en-IN"
        />
      </div>
    );
}

export default App;

By following the steps outlined above, you can successfully implement a NumericTextBox that adheres to the Indian numbering format.