Add "extraLabels" from custom cities for each timezone

[Toledodev]

Clear and concise description of the problem

At the moment we are not able to create custom timezones, so the ideal would be to give the user the option to be able to create custom timezones. We could use all the information from an existing timezone and just change the value to show in the dropdown

Suggested solution

Add an "extraLabels" prop, which proposes to the user to add a customized label to some timezone. The extraLabels prop is empty by default, when a user wants to add some custom content to the dropdown (like a city) just add an object to the extraLabels prop containing the key label (which will be the name of the timezone in the dropdown) and the key tz (which will be the timezone in which the entry will be entered).
For example, if I add this object to extraLabels:

The result in the dropdown will be this: https://www.loom.com/share/6b1e7685dec0409d8b436f38c1a70803

Alternative

No response

Additional context

No response

Validations

• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[ndom91]

Hi @Toledodev thanks for the feedback!

Did you see the "Custom Timezone" section in the README? This should (hopefully) work for you.

See: https://github.com/ndom91/react-timezone-select#-custom-timezones

Also this codesandbox example from the README includes two custom timezones (Pittsburgh and Frankfurt) as well if you want to take a look 👍

[PeerRich]

I dont think that does it. we wanna add a ton of cities in the autocomplete but not show them in the dropdown

[ndom91]

Closing this in favor of your work on the "filter timezones by cities" work here.

If you still want an additional feature to override the labels for existing timezones, feel free to open another issue 👍