Introduction to FormatJS

FormatJS is a modular collection of JavaScript libraries for internationalizing web applications. It provides dozens of useful APIs to help you localize dates, times, numbers, and strings. Below, we will explore some of these APIs along with code snippets and an app example demonstrating their usage.

Basic Usage

First, install FormatJS using npm:

npm install formatjs

API Examples

Number Formatting (Intl.NumberFormat)

The Intl.NumberFormat API is used to format numbers according to different locales:

 import { IntlProvider, FormattedNumber } from 'react-intl';
function App() {
    return (
        
            

                
Formated Number:
                
            
        
    );
} 

Date and Time Formatting (Intl.DateTimeFormat)

The Intl.DateTimeFormat API allows you to format dates and times:

 import { IntlProvider, FormattedDate, FormattedTime } from 'react-intl';
function App() {
    const date = new Date();
    return (
        
            

                
Formated Date:
                
                
Formated Time:
                
            
        
    );
} 

Message Formatting (Intl.MessageFormat)

The Intl.MessageFormat API allows you to format messages with variables:

 import { IntlProvider, FormattedMessage } from 'react-intl';
function App() {
    return (
        
            

                
Greeting Message:
                
            
        
    );
} 

Application Example

Here is a simple React application that uses the above APIs:

 import React from 'react'; import ReactDOM from 'react-dom'; import { IntlProvider, FormattedMessage, FormattedNumber, FormattedDate, FormattedTime } from 'react-intl';
function App() {
    const date = new Date();
    return (
        
            

                
Using FormatJS
                
                

                
                

                
                

                
            
        
    );
}
ReactDOM.render(, document.getElementById('root')); 

You can use different locale props to test how these numbers, dates, and messages are formatted according to the given locale.

Happy coding!

Hash: 6a9fa20661a619d84c50f3ca55e6796e8de9127b102724485a2b5c8d1dfd0add