@mwid/react-country-picker

🌐 React Country Picker

A country picker component with real-time autocomplete, built with React.

Installation

# npm
npm install @mwid/react-country-picker

# Yarn
yarn add @mwid/react-country-picker

# pnpm
pnpm add @mwid/react-country-picker

Usage

Import:

// TypeScript / ESModules
import { CountryPicker } from "@mwid/react-country-picker";

// CommonJS
const { CountryPicker } = require("@mwid/react-country-picker");

Create a callback for when a country is selected:

const onSelect = useCallback(() => {
	// Do something
}, []);

Add the CountryPicker component to your JSX:

<CountryPicker onSelect={onSelect} />

Props

Property	Type	Default	Description
onSelect	(country: Country) => void		Called when a country is selected from the country list.

Where Country is:

interface Country {
	officialName: string;
	commonName: string;
	flagSvgUrl: string;
}

Architecture

Project Structure

src/	Description
api	All API requests and their request and response body interfaces. Each request should be prefixed with its HTTP method (Eg, GET /countries/all -> getAllCountries) and their request/responses named similarly (Eg, getAllCountriesRequest and getAllCountriesResponse).
components	React components. Each component resides in its own directory, and sub-components that only it uses are nested under it. Storybook stories are placed in component.stories.tsx, unit tests are placed in component.test.tsx and styled-components primitives are placed in component.style.tsx.
config	Configuration-related items (that may be changed via environment variables) and constant values.
hooks	Custom hooks shared across the entire component.
lib	Re-exports of library functions and factories. Eg, create a database connection instance.
slices	Redux state slices. Actions are placed in slice.actions.ts, reducers are placed in slice.reducer.ts, selectors are placed in slice.selectors.ts and entity adapters are placed in entity.entity.ts.
test	Test-specific configuration and setup. Fixtures define unchanging mock data used across multiple tests.
types	TypeScript types used across the component to define a contract on the structure of data.
utils	Reusable utility functions and types.

Technology

Tooling

• Storybook for component prototyping and development.
• TypeScript for type-checking, type-safety and builds.
• Prettier for code formatting.
• ESLint for linting and error-checking.
• Jest, React Testing Library and nock for unit and integration testing.

Front-end

• React for user interface, state and components.
• Redux with Redux Toolkit for application data management.
• Styled Components for component styling.
• axios for making web requests.
• react-window for performant large list rendering.

Local Development

Install Node:

curl -L https://git.io/n-install | bash
n auto

Install dependencies:

npm i

Run unit and integration tests:

npm t

Develop in Storybook:

npm run storybook

Build for production:

npm run build

npm Scripts

Script	Description
build	Build code for production with TypeScript.
format:check	Check all code formatting with Prettier.
format:write	Fix all code formatting with Prettier.
lint	Lint all code with ESLint.
test	Run all unit and integration tests.
storybook	Start the Storybook development server.
storybook:build	Build Storybook for publishing.

License

This project is licensed under the MIT license.