danalloway / react-country-flag Goto Github PK

View Code? Open in Web Editor NEW

247.0 4.0 43.0 4.57 MB

React component for emoji/svg country flags.

Home Page: https://danalloway.github.io/react-country-flag/

License: MIT License

HTML 1.30% TypeScript 98.70%

react-country-flag's Introduction

react-country-flag

React component for emoji/svg country flags.

Install

npm install --save react-country-flag

BREAKING CHANGES

v3.x NONE only Typescript Types were introduced, enjoy!

v2.x has breaking changes

code is now countryCode
title and aria-label are not defined any more, it is up to the developer to pass these in
styleProps is now style

Usage

All props are passed onto the element, everything can be overwritten.

import React from "react"
import ReactCountryFlag from "react-country-flag"

function ExampleComponent {
    return (
        <div>
            <ReactCountryFlag countryCode="US" />

            <ReactCountryFlag
                className="emojiFlag"
                countryCode="US"
                style={{
                    fontSize: '2em',
                    lineHeight: '2em',
                }}
                aria-label="United States"
            />

            <ReactCountryFlag countryCode="US" svg />

            <ReactCountryFlag
                countryCode="US"
                svg
                style={{
                    width: '2em',
                    height: '2em',
                }}
                title="US"
            />

            <ReactCountryFlag
                countryCode="US"
                svg
                cdnUrl="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.4.3/flags/1x1/"
                cdnSuffix="svg"
                title="US"
            />
        </div>
    )
}

export default ExampleComponent

Detecting Emoji support

Try this out and conditionally render your country flag https://github.com/danalloway/detect-emoji-support

License

MIT © danalloway

react-country-flag's People

Contributors

Stargazers

Watchers

Forkers

patrickus bebraw appzk vamb newtectonics goloschain fugralex simsim0709 vladnikolov86 jacklaurencegaray vss414 myhubalex thibaultboursier zerojargon wizylance scizers pgahq kenchiang1211 sathishkrishnan20 saburiinfor kmlx shetamitesh stephanebachelier davidcim twltwl invalidtoken amerllica gwro jlpujante kalkusa lunarmelody h45h74x ramazansancar beki-d rubichandrap real-charlie gregorydaval345 lucasbassetti ibqn vassilidev thecodedestroyer emnopal fletchdes

react-country-flag's Issues

Declaration File missing

What I have done : npm install --save react-country-flag

react-country-flag folder appears well in my node-modules.

Then : import ReactCountryFlag from "react-country-flag"; from a .ts file

Gets me this error :

Could not find a declaration file for module 'react-country-flag'. '/home/{...}/node_modules/react-country-flag/dist/index.js' implicitly has an 'any' type.
  Try `npm install @types/react-country-flag` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-country-flag';`  TS7016

Link to CDN is incorrect

All flags are missing except for svg, because cdn no longer serves file it used to under link you use.

Flag CH showing Switzerland Flag

I think that is wrong.

React Country Flag is not showing emoji on windows OS

We have developed our product on Linux on which this library was working just fine
but on moving to windows emoji is not displaying on all browsers except Firefox
Kindly resolve this issue as this has a great impact on our system
On browsers except for firefox, it displays us for the united states in small alphabets rather than the united states flag

After the 2.1.0 update Internet Explorer 11 is broken

I get this error:
SCRIPT1010: Expected identifier
function Ht(e){let{cdnSuffix:t,cdnUrl:n,countryCode:r,style:o,svg:i}

Abkhazia flag is missing

first of all thanks for your lovely library. I am trying to add Abkhazia flag (AB) but seems like the flag doesn't exist. I am not sure the country code is wrong or this flag has been not implemented.

This is the url for the country:
https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.4.3/flags/4x3/ab.svg

Thanks in advance.

v2-v3 migration?

https://danalloway.github.io/react-country-flag appears to be broken
attempted upgrade but no idea what the breaking changes are!

Emoji's are not supported in Chromium based browsers

Works fine in Firefox, but not on the ones below:
Google chrome
Edge
Brave

Alt prop support

Hi there, thanks for maintaining this awesome lib! I've come across a use case that's not contemplated as of yet. I've been running my HTML code against W3C's validator and I get the following error:

Error: An img element with no alt attribute must not have any aria-* attributes other than aria-hidden.

<img aria-label="Brazil" title="Brazil" src="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.4.3/flags/4x3/br.svg" style="display:inline-block;width:1em;height:1em;vertical-align:middle"/>

It would be great if you could provide an alt prop to your component and/or default an alt based on the country's code.

Cheers!

Missing two country flags

There are no flag for codes:
TA Tristan da Cunha
AC Ascension

It would be nice to have those to avoid manually handling those cases when getting list of countries from other libs.

Swiss (SVG) flag has wrong aspect ratio

The flag of Switzerland displays a white cross in the centre of a square red field. The white cross is known as the Swiss cross. Its arms are equilateral, and their ratio of length to width is 7:6. The size of the cross in relation to the field was set in 2017 as 5:8.

https://en.m.wikipedia.org/wiki/Flag_of_Switzerland

the SVG for the Swiss flag in this package is wrong (3:2 probably?) but it should be square (1:1)

Add country name prop

It would be nice to have the ability to use a full country name such as "Russia", instead of the country code (RU) to pull the correct flag. Would this be a possibility in a future update?

Add support for alt attribute

It would be nice to have a way to set the alt attribute of the img element that react-country-flag creates.

Images links are not available

Looks like cdn links are not correct:
https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.1.0/flags/4x3/usa.svg

Is there way to use it locally?

Please add flag of Netherlands Antilles

Issue

I use AN iso2 code for Netherlands Antilles, seems like flag icon is broken
See this demo here

Show demo / examples / screenshots

Windows 10 flag emoji suppport

Hi, I have problem with Edge browser, icon does not showing.
Thanks

Tristan da Cunha (TA) and Ascension SVGs are missing

Tristan da Cunha (country cody => ), Ascension (country code => AC)

are available as icons but not SVG

Retrieve all SVGs on a single fetch

Hi there,

I am currently working on a country selector, I am using react-country-flag to display a little flag next to the country name. Unfortunately, the loading time is quite high due to all the fetch requests (one per flag)
Is there any way to avoid this? Perhaps download everything on a single fetch?

ReferenceError: self is not defined after 2.2.0 update

Hi, thanks for your work at first

Describe the bug

After upgrading to 2.2.0, compile errors with:

Failed to compile.

14:05:30] [Step 4/5] > Build error occurred
[14:05:30] [Step 4/5] ReferenceError: self is not defined
[14:05:30] [Step 4/5] at Object. (/app/node_modules/react-country-flag/dist/index.js:553:38)

System information

System macOS Catalina 10.15.3
node 12.8.0
npm 6.10.3
react-country-flag 2.2.0

Additional context

with 2.1.0 ver everything works

say if you need more extend info or reproduced some repo

License file

Hello, could you please define license for this project and create LICENSE file?

Component triggers HTML5 Canvas fingerprinting protections

When i render this component, browser asks my permission to let server read the HTML5 canvas data.
Why is that? Besides, no functionality suffers if i don't allow that.

v2 WIP

prop names are changing (breaking)
everything from props to styles will be easier to override (breaking)
library will not longer be a class component
icons emoji/svg will be more of a consistent size (visually breaking)
will detect emoji support and fallback to svg (fixes IE/Edge incompatibility)

Support for welsh and english flags

Hi there,
I'd love to use this library, but for the purposes of my project I'd need to be able to use the welsh flag and the english flag separately rather than the GB flag. It seems to me that this library does not provide support for these flags at this time.
Perhaps there are others like me would love to use this library but cannot for similar reasons.

I hope you consider adding these.
Cheers :)

Adding a country flag that does not exist in the country list

Hello,

Could we add an extra flag for the Turkish Republic of Northern Cyprus country, whose international area code is 'CT'?

Here's about the country/flag:
https://en.wikipedia.org/wiki/Northern_Cyprus

Many thanks for considering my request.

Here's what it looks like now:

Update to work with React 17

Would it be possible to update the project to work with React 17?
It's currently only accepting version 15 or 16.
Thanks

Feature request: typed countryCode prop

Instead of countryCode: string;, the prop should be typed with all valid codes. This would provide static validation.

className attribute is not setted.

Complete types from each keys

Thanks for your awesome library, it would be better to export types for each key in Country object. for example iso, it is not string, it is ISO3166Alpha2. I will send a PR for this improvement.

resolve the GitHub security vulnerability notice

Country flags missing for Kosovo (XK) and Netherland Antilles (AN)

Flags show up blank for these two countries
I believe Netherland Antilles is just The Netherlands so I can always just map one to the other, just wanted to bring it to your attention.
Using latest v1.0.1

Offline mode

I want to keep all flag icons on my side. How can I do this?

Flag missed to Netherlands Antilles

Flag missed to countryCode = 'AN' :
https://www.iso.org/obp/ui/#iso:code:3166:AN

react-country-flag – UK flag is missed on CDN

Could you please add UK flag? https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.4.3/flags/4x3/uk.svg

How can I add custom png files to this library?

I want to add some game flags (e.g. Dota 2), and maybe it can check the countryCode property, if it is "dota2", it can fetch a custom image from a folder instead of from Cloudflare website. I have tried putting the code and change the "src" on index.js file like so:

var dota2Image = require("../custom/dota2.png");
if (svg) {
    var flagUrl = "".concat(cdnUrl).concat(countryCode.toLowerCase(), ".").concat(DEFAULT_CDN_SUFFIX);
    if (countryCode === "dota2") flagUrl = dota2Image;
    return /*#__PURE__*/React__namespace.createElement("img", _extends({}, props, {
      src: flagUrl,
      style: _objectSpread({
        display: 'inline-block',
        width: '1em',
        height: '1em',
        verticalAlign: 'middle'
      }, style)
    }));
  }

However, the result is not what I expected, it just shows the "title" props. If you know how to solve my problem please let me know :)

If country code is not correct the system crash

I got an error because the code for a country that I was receiving is in Iso Alpha-3 (IRL) instead of Iso Alpha-2 (IE). If the code does not exists, it should manage to return a valid empty flag or just nothing.

Handle a 404 error

There is no way to handle a query error if the countryCode doesn't exist in cdnjs flags. For example, 'GZ' or 'AN'.

Installing through Yarn

Hi there!

When I try to install the package through yarn I have next errors:

yarn add react-country-flag

yarn add v1.6.0
[1/4] 🔍  Resolving packages...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
error An unexpected error occurred: "https://registry.yarnpkg.com/react-country-flag: getaddrinfo ENOTFOUND registry.yarnpkg.com registry.yarnpkg.com:443".
info If you think this is a bug, please open a bug report with the information provided in "/Users/rash2x/WebstormProjects/Calendars/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

The prop `countryCode`

The prop countryCode is marked as required in ReactCountryFlag, but its value is undefined.

Missing svg flag for Principality of Monaco

There are no svg flag for countryCode = "MC" => Principality of Monaco
ISO 3166 code: "MC"

bumping version to react-country-flag 3.00 causes error

Dan,

git clone git@github.com:CourtHive/tods-score-grid.git

yarn install
yarn storybook

All is well

Edit package.json and bump the version of react-country-flag

yarn install 
yarn storybook

"Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports."

Originally posted by @CourtHive in #47 (comment)

Please use white-red-white version of belarusian flag

The red-green flag is associated with president Lukashenko who is called "Europe's last dictator". Please, use our national flag to support the people of Belarus.

https://www.euronews.com/2020/08/26/telegram-changes-emoji-of-belarus-flag-in-solidarity-with-protesters-thecube

Improve accessiblity

Thank you for this component, exactly what I needed today :)

One small improvement which would be nice: Add some level of accessibility. Right now the output is purely the image itself. I think some form of title attribute on the span tag would already help.

What are you thoughts on that? I'm happy to submit a PR when we have reached an agreed path :)

Swiss flag svg is not square

Missing flag

Hi,
There is no flag provided for Netherlands Antilles country.

Close Completed Issues!!

One of the first things I do when looking for a package is check the issues to see what open issues there are and if reported issues have been resolved. There are several issues that were answered or fixed but they are still open! Please close them - it makes the project look better maintained...

UAE Flag ?

Hi, is the United Arab Emirates (AE) flag svg present?

Thxs in advance

Stars element on US flag misplaced

The star element on the US flag is misplaced. This causes a big issue in React Native, where the stars will be misplaced in the top left corner, with one row half way outside the flag.

Browser inspection:

As you can see the star element is off by a tad bit. This looks fine in the browser, but when trying to use it in React Native it breaks. (I know this is a react library, but it is still a bug that just so happens to look fine in the browser, and there will be no negative consequences in fixing it)

React native result:

Properly placing the star element should fix things in React Native, and fix an unnoticed bug.

Is it possible to add countries that are not available?

For example, there is no flag of Zanzibar and i need it :)