🌐 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.