React.js Node.js Tutorial to Display Country Flag Emoji in Browser Using tiny-flag-react Library in Javascript Full Project For Beginners

React.js Node.js Tutorial to Display Country Flag Emoji in Browser Using tiny-flag-react Library in Javascript Full Project For Beginners

 

 

npm i tiny-flag-react

 

 

Tiny Flag React

Display country flags in less than 1KB with the magic of unicode (with graceful fallbacks).

Displays emoji by default, when not supported, falls back to an image tag.

DEMO

 

 

import TinyFlag from "tiny-flag";
 
<TinyFlag
  country="US" // ISO 3166-1 alpha-2 code
  alt="United States Flag" // Used as the image alt tag
  fallbackImageURL="https://cdn.jsdelivr.net/npm/react-flagkit@1.0.2/img/SVG/US.svg" // Used when emoji flags are not supported.
/>;

 

let country = "US";
let countryName = "United States";
 
<TinyFlag
  country={country}
  countryName={countryName}
  fallbackImageURL={require("FlagKit/Assets/SVG/" + country + ".svg").default}
>

 

 

Leave a Reply