Skip to content

Conversation

@AlexisPuga
Copy link

Hi, @frostney! How's it going?

I made some changes to your code to avoid bundling/importing all flags when using this component, and import only the required flags, to minimize bundle size.

I know it's been a while since you made this, but I'd be great if this gets released someday.

Basically, these changes allow importing flags beforehand and passing them using the from param. To do that:

  • A new param was added, called from. This is not a path, it's an optional object that is intended to contain exported flags/images from the ./flags sub-directories, like ./flags, ./flags/flat, ./flags/shiny/16, etc. This doesn't affect previous versions.
  • Flags are not imported at the top, but rather at runtime (using import() inside a useEffect hook) only if from is not present. This might affect previous versions, but I don't think so.

Hopefully these changes are understandable and easy to read. I added some examples in the readme file, and in the code too (just in case). If you need something else, please tell me. I'll be glad to help.

Have a nice day, and thank you releasing this project!

Import flags asynchronously inside a useEffect hook, and set the Image
source if component is mounted, with the help of a useState hook.
Remove ./flags import from the top.
Move duplicated code to a new function called getFlag.
Use it to pass your own flags, and made it optional.
Allow using flags from ./flags, ./flags/flat, ./flags/flat/16, etc.,
or directories that match that structure.
Add a description and a few examples.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant