@mwid/react-country-picker NPM

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

@reduxjs/toolkit axios react-icons react-redux react-window styled-reset

@everything-registry/sub-chunk-627 @zalastax/nolb-_mw @infinitebrahmanuniverse/nolb-_mw

0.1.0

2 years ago