Giter Club home page Giter Club logo

react-world-flags's Introduction

CircleCI

react-world-flags

Easy to use SVG flags of the world for react

Demo

Installation

npm install react-world-flags

Usage

import Flag from 'react-world-flags'

<Flag code={ code } />

Where code is the two letter, three letter or three digit country code.

You can also pass an optional fallback which renders if the given code doesn't correspond to a flag:

import Flag from 'react-world-flags'

<Flag code="foo" fallback={ <span>Unknown</span> }/>

All props but code and fallback are passed through to the rendered img

<Flag code="nor" height="16" />

// <img src="data:image/svg+xml..." height="16">

Caveat

The bundle contains all flags of the world and is about 1.3 MB gzipped.

SVG's are inlined using Data_URIs.

react-world-flags's People

Contributors

dependabot-preview[bot] avatar dependabot[bot] avatar seeratsekhon avatar smucode avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

react-world-flags's Issues

Package size is large

Is there any way to get this package smaller? 1.1M gzipped is setting off alarms.
Would it be possible to import each flag individually?

Alternative Text

Would it be possible to include a caption on the flag or alternative text?

Implement tree shaking/bundle size reduction

Currently, all country flags are included in the app bundle regardless of which flags are actually used.

WebPack has features to include only the necessary parts, in a manner similar to that utilized by @material-ui/icons, but this would require a rewrite of this library.

As it is, the current bundle size is excessive and a fix needs to be implemented for the library to be useful.

Missing Country flags for the UK

Sadly, we only have flags for Great Britain/UK.

As the UK is actually 4 countres (Wales, England, Scotland and Northern Ireland), could we also get these flags added ?

Handle not found country code

I'm wondering what if the code doesn't exist in the images folder, is there's a way to handle this?

For example to render some flag instead of not found flag.

<Flag code={'notFound' } /> // in case not found show some country

Type errors

I'm getting the following error:

Type error: 'Flag' cannot be used as a JSX component.
  Its type 'FC<FlagProps>' is not a valid JSX element type.
    Type 'FunctionComponent<FlagProps>' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.
      Type 'import("/Users/some-path/node_modules/@types/react-simple-maps/node_modules/@types/react/index").ReactNode' is not assignable to type 'React.ReactNode'.

After the following updates:

Package From To
@clerk/nextjs 4.24.1 4.25.1
@tanstack/react-query 4.35.3 4.35.7
@tanstack/react-table 8.10.1 8.10.3
axios 1.5.0 1.5.1
flowbite-react 0.6.1 0.6.3
next 13.5.2 13.5.3
@types/node 18.17.19 18.18.1
@types/react 18.2.22 18.2.24
@types/react-simple-maps 3.0.0 3.0.1
@types/react-world-flags 1.4.2 1.4.3
@typescript-eslint/eslint-plugin 6.7.2 6.7.3
@typescript-eslint/parser 6.7.2 6.7.3
eslint-config-next 13.5.2 13.5.3
postcss 8.4.30 8.4.31

height prop has no effect.

Using the component as it was shown in the documentation but the height has no effect on the output.

<Flag code='GB' height="10" />

Wrong flag for Slovenia

The Slovenian flag looks like this right now:

image

It looks like a super zoomed version. The real flag looks like this:

image

Very large build size

Thank you for your initiative with this project, although as it is not possible to import a single flag, the final build of my project is increased by 1MB. So.. can't use it in prod
screen shot 2018-05-27 at 08 47 00

"svg-country-flags":"^1.2.3"

Hi,

Thank you for making react-world-flags!
Would you like to change the package.json line 23 to "svg-country-flags":"^1.2.3"
instead of the [email protected] link?

Because it would require the developers to have a github account and add SSH key to their account.
Then it can be installed successful through npm/yarn.

Thank you.
DC

Flags have different sizes

As we can see in a Flag List, flags have equal sizes, or at least a parameter should indicate if we want all flags to have equal dimensions among each others.

Thanks

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.