FR: Hide or allow custom components as flag

[heggemsnes]

Hi!

We have a small issue trying to create a site for a Norwegian NGO. In Norway we have 2 written languages as well as a somewhat prominent indigenous language for the Sami. Unfortunately the Sami flag is not available as an emoji and to make things a bit more complicated their language code is se_NO which causes a Swedish and Norwegian flag to appear.

It would be great if the config for setting up languages either allowed for hiding the emoji flag or a custom React component to render custom flags.

[rxkevin]

Issue repeats with other languages too. et - language code for Estonian, country code for Ethiopia. sv - language code for Swedish, country code for El Salvador. Would be great to be able to pass a preferred country flag, or a custom component in some cases. There's obviously more examples, as many language codes are not the same as country codes, those two are just the ones I encountered.

Needless to say, keep up the good work with the plugin, it's really useful!

[LiamMartens]

@heggemsnes @rxkevin you can now override how the flag renders using custom components implemented as a sanity studio part (See here)

[rxkevin]

@LiamMartens I am having trouble implementing the custom flags with the given instructions https://github.com/LiamMartens/sanity-plugin-intl-input/blob/develop/docs/advanced-languages.md#override-flag-icons .

Where do I place these custom flag components? how does the parts implementation look like in sanity.json. Could you provide a full working example?

I tried pointing to the custom flag component like such without any luck:

[LiamMartens]

@rxkevin the part implements is fine - as for the actual code - it's a single file with all flag overrides per language eg;

import React from 'react';

// we render 2 flags - so the code will be 'en' or 'us'
export const en_us = ({ code }) => (
    <>My Custom Flag</>
);

[rxkevin]

@LiamMartens I was wondering, wouldn't it have been more consistent and better developer experience, to add the flag in the languages configuration?

languages: [
  { name: 'en_us', title: 'English (US)' },
  { name: 'en_gb', title: 'English (UK)' }
]

And the type would be something like:

interface Language {
  name: string;
  title?: string;
  flag?: DefaultFlag;
  customFlag?: ReactNode;
}

type DefaultFlag = "GB" | "NL" | "DE" | ... ;