React Format Number with Commas Thousand Separators

        const { useState } = React;

​

        function App() {

            const [number, setNumber] = useState('');

​

            const handleChange = (event) => {

                const { value } = event.target;

​

                // Remove any existing commas from the input

                const sanitizedValue = value.replace(/,/g, '');

​

                // Format the number with commas

                const formattedValue = Number(sanitizedValue).toLocaleString();

​

                setNumber(formattedValue);

            };

​

            return (

                <div className='container'>

                    <h3>React Js Format Number as Comma Separator</h3>

                    <input

                        type="text"

                        value={number}

                        onChange={handleChange}

                    />

                    <p>Number: {number}</p>

                </div>

            );

        }

​

        ReactDOM.render(<App />, document.getElementById("app"));

    </script>

      function App() {

        const value = 12345;

        const formattedNumber = new Intl.NumberFormat("en", {

          notation: "compact",

          compactDisplay: "short",

        }).format(value);

​

        return (

          <div className="container">

            <h3>React Js Compact Format Number</h3>

            <p>Number : {value}</p>

            <p>Formatted Number: {formattedNumber}</p>

          </div>

        );

      }

​

      ReactDOM.render(<App />, document.getElementById("app"));

    </script>

      function App() {

        // The number you want to format

        const number = 987654321987;

​

        // Format the number with the US locale

        const USformatter = new Intl.NumberFormat("en-US");

        const USformattedNumber = USformatter.format(number);

​

        return (

          <div className='container'>

            <h3>React Js Number Format - US (comma separated)</h3>

            <p>Original Number: {number}</p>

            <p>US (comma separated): {USformattedNumber}</p>

          </div>

        );

      }

​

      ReactDOM.render(<App />, document.getElementById("app"));

    </script>

      function App() {

        // The number you want to format

        const number = 1000000;

​

        // Format the number with the Indian locale

        const IndianFormatter = new Intl.NumberFormat("en-IN");

        const IndianFormattedNumber = IndianFormatter.format(number);

​

        return (

          <div className="container">

            <h3>React Js Number format - Indian (comma separated)</h3>

            <p>Original Number: {number}</p>

            <p>Formatted Number (Indian): {IndianFormattedNumber}</p>

          </div>

        );

      }

​

      ReactDOM.render(<App />, document.getElementById("app"));

    </script>

      function App() {

        // The number you want to format

        const numberToFormat = 98765432198;

​

        // Format the number with the Swiss locale

        const formattedNumber = numberToFormat.toLocaleString("de-CH");

​

        return (

          <div className="container">

            <h3>React Js Number Format - Swiss (apostrophe separated)</h3>

            <p>Original Number: {numberToFormat}</p>

            <p>Formatted Number (Swiss): {formattedNumber}</p>

          </div>

        );

      }

​

      ReactDOM.render(<App />, document.getElementById("app"));

    </script>

​

      function App() {

        // Method 1: Using Intl.NumberFormat

        const formatNumberIntl = (number) => {

          return new Intl.NumberFormat("it-IT").format(number);

        };

​

        // Method 2: Using a custom function with regex

        const formatNumberCustom = (number) => {

          return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");

        };

​

        // Method 3: Using toLocaleString with Italian options

        const formatNumberLocale = (number) => {

          return number.toLocaleString("it-IT");

        };

​

        // Method 4: Using parseFloat with fixed decimal places

        const formatNumberFixedDecimals = (number) => {

          return parseFloat(number).toFixed(2).replace(".", ",");

        };

​

        // Method 5: Using a regex to swap decimal and thousands separators

        const formatNumberRegexSwap = (number) => {

          return number

            .toString()

            .replace(/\./g, "X")

            .replace(/,/g, ".")

            .replace(/X/g, ",");

        };

​

        const number = 1234567.89;

​

        return (

          <div className='container'>

            <h3>React js Formatted Number in Italian Style - dot separated (Using different methods):</h3>

            <p>Method 1: {formatNumberIntl(number)}</p>

            <p>Method 2: {formatNumberCustom(number)}</p>

            <p>Method 3: {formatNumberLocale(number)}</p>

            <p>Method 4: {formatNumberFixedDecimals(number)}</p>

            <p>Method 5: {formatNumberRegexSwap(number)}</p>

          </div>

        );

      }

​

      ReactDOM.render(<App />, document.getElementById("app"));

    </script>

      function App() {

        const number = 1234567.89;

​

        // Format the number for the Swedish locale with space as the separator

        const formattedNumber = new Intl.NumberFormat("sv-SE").format(number);

​

        return (

          <div className="container">

            <h3>React Js format Number - Swedish (space separated)</h3>

            <p>Original Number: {number}</p>

            <p>Formatted Number (Swedish): {formattedNumber}</p>

          </div>

        );

      }

​

      ReactDOM.render(<App />, document.getElementById("app"));

    </script>

      function App() {

        const number = 12345676;

​

        const formatNumberRussian = (number) => {

          return number.toLocaleString("ru-RU");

        };

​

        return (

          <div className="container">

            <h3>React Js format number - Russian (space separated)</h3>

            <p>Original Number: {number}</p>

            <p>Formatted Number: {formatNumberRussian(number)}</p>

          </div>

        );

      }

​

      ReactDOM.render(<App />, document.getElementById("app"));

    </script>

      function formatNumberWithHyphen(number) {

        // Convert the number to a string and remove any non-digit characters

        const cleanNumber = String(number).replace(/\D/g, "");

​

        // Define the number of digits in each group

        const digitsInGroup = 3;

​

        // Split the cleanNumber into groups of digits from right to left

        const groups = [];

        let startIndex = cleanNumber.length;

        while (startIndex > 0) {

          const endIndex = startIndex;

          startIndex = Math.max(0, startIndex - digitsInGroup);

          groups.unshift(cleanNumber.slice(startIndex, endIndex));

        }

​

        // Join the groups with hyphens and return the formatted string

        return groups.join("-");

      }

​

      function FormatNumberApp() {

        const numberToFormat = 1234567890;

​

        return (

          <div className='container'>

            <h3>React js format number - hypen seperated</h3>

            <p>Original number: {numberToFormat}</p>

            <p>Formatted number: {formatNumberWithHyphen(numberToFormat)}</p>

          </div>

        );

      }

​

      ReactDOM.render(<FormatNumberApp />, document.getElementById("app"));

    </script>