use-react-countries-hook

Table of Contents

• Introduction
• Installation
• Usage
• API
• License

Introduction

The use-react-countries-hook is a custom React hook that simplifies the process of fetching and managing country data in your React applications. It provides an easy-to-use interface for retrieving country information such as country names, country calling codes, country flags, making it a valuable tool for applications that require country-related information.

Installation

You can install the use-react-countries-hook by using npm or yarn.

npm install use-countries-hook

or

yarn add use-countries-hook

Usage

import React from 'react';
import { useReactCountriesHook } from 'use-react-countries-hook';

function CountryList() {
  const [countries, setCountries] = useReactCountriesHook();

  // Your component logic here

  return (
    <div>
      {countries.map(country => (
        <div key={country.countryCallingCode}>
            <img
                src={country.flag_svg}
                // Optionally png can be accessed too.
                src={country.flag_png}
                alt={country.name}
            />
            <p>Country: {country.name}</p>
            <p>Country Code: {country.countryCallingCode}</p>
        </div>
      ))}
    </div>
  );
}

export default CountryList;

API

The use-react-countries-hook provides the following properties for each country in the returned array:

type useReactCountriesProps = {
  name: string;
  flag_png: string;
  flag_svg: string;
  countryCallingCode: string;
};

License

This project is licensed under the MIT License.

Thank you for using use-react-countries-hook. We hope it simplifies your React application's country data management. If you have any questions or need further assistance, please don't hesitate to reach out.