Skip to content

polixisNG/react-countries-flags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

33 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-countries-flags

What is this?

A simple React component for displaying country flags in various operating systems.

Installation

You can install this component using npm or yarn:

npm i react-countries-flags

or

yarn add react-countries-flags

Usage

To use this component, import it into your React component:

import ReactCountriesFlags from "react-countries-flags";

const App = () => {
    return (
        <div className="App">
            <ReactCountriesFlags isoCode='am'/>
        </div>
    );
}

export default App;

You can also customize the alt text, width, and height of the flag:

for example

<ReactCountriesFlags isoCode={'am'} alt={'flag'} width={50} height={30}/>

Options

If the flag for the specified ISO code is not found, the component will display a default flag instead.

takes 4 parameters

Prop name Type Default value Description
isoCode string none The ISO code for the country's flag
alt string "flag" The alt text for the flag
width number 25 The width of the flag in pixels
height number 15 The height of the flag in pixels

This package should work on all operating systems that support React.

ISO_3166-2

https://en.wikipedia.org/wiki/ISO_3166-2

TypeScript Compatibility

Usage with TypeScript

If you encounter type-related issues when using react-countries-flags with TypeScript, follow these steps to address potential problems:

  1. Create TypeScript Declaration File:

Create a new TypeScript declaration file, e.g., react-countries-flags.d.ts, in the root directory of your project.

Add the following content to the declaration file:

declare module 'react-countries-flags' {
    import React from 'react';
    const ReactCountriesFlags: React.ComponentType<{
        isoCode?: string;
        alt?: string;
        width?: number;
        height?: number;
    }>;
    export default ReactCountriesFlags;
}
  1. Include Declaration File in TypeScript Configuration:

Update your tsconfig.json file to include the declaration file by adding it to the "include" section:

{
  "compilerOptions": {
    // your compiler options...
  },
  "include": [
    "react-countries-flags.d.ts" // or the name of your TypeScript declaration file
  ]
}

About

Easy way to display world country flags in various operating systems.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published