munkacsimark / react-flag

Simple flag component for React which uses svg or emojis, based on ISO-3166.

React Flag

This package is based on ISO-3166 country codes, contains 245 flags. It comes with minimum styling for easier use in your project. Flags are in svg format but you can use them with emojis as well.

Installation

npm install @munkacsimark/react-flag --save

Usage

import Flag from '@munkacsimark/react-flag'

Properties

Key	Value	Required	Default	Format
alpha2	String	false*	-	ISO 3166-1 alpha-2
alpha3	String	false*	-	ISO 3166-1 alpha-3
numeric	String	false*	-	ISO 3166-1 numeric
tld	String	false*	-	Country code TLD
size	String	false	'sm'	'xs', 'sm', 'lg', 'xl'
useEmoji	Boolean	false	false	-
disableLabel	Boolean	false	false	-

* For identifying the country one of the following properties needs to be defined: alpha2, alpha3, numeric, tld. The order of property precedence is the same.

alpha2 and alpha3 should be upper-case letters (e.g. 'US'), numeric codes as string (e.g '840') and tlds starting with a period (e.g. '.us').

There are predefined sizes of container width: 'xs'=18px, 'sm'=24px, 'lg'=36px and 'xl'=48px. Each is using 1.5 ratio for calculating height of container (e.g height of 'sm'=24/1.5=16px).

You can use useEmoji property for using only emojis in accessible way. This feature is based on a11y-react-emoji. disableLabel property makes sense only for emojis, it disables aria-label and sets aria-hidden to true.

Examples

Simple usage

<Flag alpha2={'US'} />

Usage with emojis

<Flag alpha2={'US'} useEmoji />

Styling

CSS Modules

Since it uses inline styles for now, you need to define width and height with !important.

.flag {
	width: 100px !important;
	height: 50px !important;
	border: 1px solid black;
}

<Flag alpha2={'US'} className={style.flag} />

Inline styles

<Flag alpha2={'US'} style={{ width: '100px' }} />

Examples

You can set styles of child img tag as following:

.flag img {
	object-fit: cover !important;
}

For making circle flags, use styles like below. Note that, you can align images with object-position rule.

.flag {
	width: 62px !important;
	height: 62px !important;
	border-radius: 50%;
}
.flag img {
	object-fit: cover !important;
	object-position: -10px center;
}

When you are using emojis with useEmoji property, you can set the size simply with:

.flag {
	font-size: 64px;
}