Display National Flags In Your App With A Country Code – react-country-flag

Description:

The react-country-flag component enables displaying national flag icons in a React app by accepting a country’s ISO 3166-1 alpha-2 code.

It can be useful for React apps that deal with international audiences, such as social networks, global marketplaces, or news outlets, where recognizing a user’s country at a glance enhances the user experience.

How to use it:

1. Install and import the ReactCountryFlag component.

# Yarn
$ yarn add @fadi-ui/react-country-flag

# NPM
$ npm install @fadi-ui/react-country-flag

import React from ‘react’;
import { ReactCountryFlag } from ‘@fadi-ui/react-country-flag’;

2. Add the ReactCountryFlag component to the app and specify the country code in the countryCode prop as follows:

const MyComponent = () => {
  return (
    <div>
      <ReactCountryFlag countryCode="US" height={18} width={25} />
    </div>
  );
};
export default MyComponent;

Preview: