Overview

The React Flag Selector widget provides a responsive, customizable dropdown to select a country or language by its flag. It supports search functionality for easy country selection, placeholder text for guidance, and the option to display flag labels. This widget is ideal for applications requiring a user-friendly flag selection, making it perfect for forms, settings, or profiles where users need to choose a country or language. It adjusts to various screen sizes and supports a full-width layout for seamless integration across devices.

Documentation

React Flag Selector Widget Documentation

Typical Usage Scenario

The React Flag Selector widget is designed for applications that need a responsive, user-friendly flag selection dropdown. It addresses the need for a seamless experience across various screen sizes, with additional functionality like searchability, a placeholder text, and the display of country flags. This widget is particularly useful in forms, user profile settings, or any application where selecting a country or language is required.

Features and Limitations

Features:

• Responsive Design: Adjusts seamlessly to different screen sizes and orientations.
• Search Functionality: Allows users to search for countries within the dropdown for faster selection.
• Customizable Placeholder: Easily set placeholder text to guide users in the dropdown.
• Show Selected Label: Optionally displays the label of the selected flag for better visibility.
• Customizable Size: Adjust the font size for both the selected flag and option labels.
• Full Width Option: Option to make the flag selector take up the full width of the container.
•  

Dependencies

This widget relies on the following dependencies:

• react-flags-select: ^2.12.1
• react: ^17.0.0 (or higher)

Ensure that these dependencies are installed and added to your project before using the widget.

Installation

1. Add the Widget to the Page: Place the widget on the desired page in your Mendix application.
2. Configure Properties: Set up the widget properties to customize its appearance and functionality.

Configuration

• Selected Flag Code: Specifies an attribute where the selected flag code will be stored.
• Placeholder: Text displayed when no flag is selected (e.g., "Select Language").
• Search Placeholder: Text displayed in the search input for filtering flags (e.g., "Search countries").
• Show Selected Label: Whether or not to display the label of the selected flag.
• Show Option Label: Whether or not to show the labels for each flag option.
• Selected Flag Label Size: Font size for the selected flag’s label.
• Option Flag Label Size: Font size for the flag options in the dropdown.
• Full Width: Set to true to make the dropdown take the full width of its container.

Full list of Country codes: https://github.com/ekwonye-richard/react-flags-select/blob/master/src/data/countries.ts

Github Link: https://github.com/Palanidgl42/ReactFlagSelector