wiredmax / react-flags Goto Github PK

Hi, Since version 0.1.13 I'm seeing this issue when using flags (same code)
If i switch back to 0.1.12 the issue is gone.
I haven't investigated this, but it seems like a props reset (The props are being refreshed and instead of country i get undefined)

react-flags.js:135 Uncaught TypeError: Cannot read property 'length' of undefined
    at Flag.render (react-flags.js:135)
    at ReactCompositeComponent.js:793
    at measureLifeCyclePerf (ReactCompositeComponent.js:73)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (ReactCompositeComponent.js:792)
    at ReactCompositeComponentWrapper._renderValidatedComponent (ReactCompositeComponent.js:819)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:359)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:255)
    at Object.mountComponent (ReactReconciler.js:43)
    at ReactDOMComponent.mountChildren (ReactMultiChild.js:234)
    at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:701)

Hi and thanks for the module,

If this is still maintained, I have some good idea to share and maybe to implement

I have a react component that display an image of a flag, whenever I change the language, the flag change, and a new image get downloaded. This result in an image download and UI is not handling it properly.

This solution will preload all the resource images and store it to state:

class ImageLoader extends Component {
    constructor() {
        super();

        this.data = {
            data: null
        };
    }

    componentDidMount() {
        axios.get("http://url.to/my/RESTful/api").then(res => {
            this.setState({ data: res.data });
        });
    }

    render() {
        return this.state.data
            ? <img
                  src={require(`../images/${this.state.data.picture}`)}
                  alt="some name"
              />
            : null;
    }
}

This is actually not possible using src props, ` will render the following:

<img alt="French Flag" src="/img/flags/flags-iso/flat/32/_unknown.png" class="sc-bdVaJa bnvcRn">

Importing this module in a typescript project fails.

Could not find a declaration file for module 'react-flags'. '/project/node_modules/react-flags/lib/react-flags.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/react-flags` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-flags';`  TS7016

I wanna use vertical-align style in flag.
but this component ignore inline style properties.
do you have any plans to apply this functionality?

Hi, I am using create-react-app and Webpack 4.

I am using the default example from the README.md

I have in my developer console an assets loading error which cannot find the resource.

When I look at the source code, it seems that it does not use any loader for loading the image but just a src link.

This means that we need to copy the images somewhere in our assets, instead of directly using what we need in the code.

Because this involve copy, I suggest that we import the image using the appropriate loader like how it as been done here for json here

Related issues

• #12

HI,

how about adding the title attribute or spreading the rest of props into the img

The error, when I use it inside a 'styled-components' header, is the following:

"A string ref, "selectedFlag", has been found within a strict mode tree. String refs are a source of potential bugs and should be avoided. We recommend using useRef() or createRef()"

hey folks,

I'm using react v.16.2.0 in my project. After adding your component to my project I've faced issue:

TypeError: Cannot read property 'string' of undefined
(anonymous function)
node_modules/react-flags/lib/react-flags.js:97
94 |
95 | propTypes: {
96 | // Alternative text of the flag HTML tag.

97 | alt: _react.PropTypes.string,
98 |
99 | // Base path to the content of /vendor
100 | basePath: _react.PropTypes.string,

Is it because of version that I'm using, or maybe there is a other reason of this error?)

Hi,

After installing and copying the vendor folder into public/img, my images were always undefined.

I had to re-set manually the basePath props :

          <Flag
            basePath="/img/flags"
            name="CAN"
            format="png"
            pngSize={64}
            shiny={true}
            alt="Canada Flag"
          />

Just wanted to check if I missed anything or if there was an issue with any update :)

Thx for the module it's great!

Hello, I'm using this lib in conjunction with i18n-iso-countries which has a few countries not covered by react-flags. Some are administered by other countries and do not have their own unique flags, but some at least have their own coat of arms, and some even do have their own flags.

Here is the list of missing countries/territories that I found along with their 2 digit ISO country code, international telephone calling code prefix, short note about their flag and/or coat of arms, and related Wikipedia reference...

Bonaire, Sint Eustatius and Saba [BQ, +599] (also: "Caribbean Netherlands", Netherlands flag, own coat of arms) https://en.wikipedia.org/wiki/Caribbean_Netherlands

Bouvet Island [BV, +0] (Norway flag) https://en.wikipedia.org/wiki/Bouvet_Island

British Indian Ocean Territory [IO, +246] (Own flag, own coat of arms) https://en.wikipedia.org/wiki/British_Indian_Ocean_Territory

French Guiana [GF, + 594] (France flag, own coat of arms) https://en.wikipedia.org/wiki/French_Guiana

Guadeloupe [GP, + 590] (France flag, own official logo) https://en.wikipedia.org/wiki/Guadeloupe

Heard Island and Mcdonald Islands [HM, +0] (Australia flag) https://en.wikipedia.org/wiki/Heard_Island_and_McDonald_Islands

Kosovo [XK, + 383] (own flag and own coat of arms) https://en.wikipedia.org/wiki/Kosovo

Reunion [RE, + 262] (France flag, own coat of arms) https://en.wikipedia.org/wiki/R%C3%A9union

Saint Pierre and Miquelon [PM, + 508] (France flag, own coat of arms) https://en.wikipedia.org/wiki/Saint_Pierre_and_Miquelon

Sint Maarten (Dutch part) [SX, +1] (own flag and coat of arms) https://en.wikipedia.org/wiki/Sint_Maarten

Svalbard and Jan Mayen [SJ, +47] (Norway flag) https://en.wikipedia.org/wiki/Svalbard_and_Jan_Mayen

United States Minor Outlying Islands [UM, +0] (USA flag) https://en.wikipedia.org/wiki/United_States_Minor_Outlying_Islands

Per newer versions of react this needs to

• Drop createClass syntax
• use prop-types package instead of react built-in