Shadcn country region select

Shadcn Country & Region Select is a select input component built as part of the Shadcn design system. It offers a blend of customization and out-of-the-box styling, adhering to Shadcn's sleek and modern design principles.

Why

I needed a country - region select component for a project. I looked around for any country - region select components that used Shadcn's design system, but I couldn't find any. So, I decided to make one myself. I hope you find it useful!

[!WARNING] Before you dive in, just double-check that you're using installing the shadcn correctly!

Usage

import { useState } from "react"
import { CountrySelect, RegionSelect } from "shadcn-country-region-select";

function App() {
  const [countryCode, setCountryCode] = useState("");

  return (
    <div className="flex items-center flex-col w-full mt-20">
      <CountrySelect
        classname="w-[180px]"
        onChange={(value) => setCountryCode(value)}
        priorityOptions={["US"]}
        placeholder="Country"
      ></CountrySelect>
      <RegionSelect
        onChange={(value) => console.log(value)}
        classname="w-[180px] mt-2"
        countryCode={countryCode}
      ></RegionSelect>
    </div>

CountrySelect properties

| Prop | Type | Description | | --------------- | --------------------- | ----------------------------------------------------- | | classname | object | configuration object for the manifest | | onChange | func | callback function fired when the select value changed | | placeholder | string | placeholder value, default "Country" | | priorityOptions | string[] | Array of countries prioritized in the select list | | whiteList | string[] | Array of allowed countries | | blackList | string[] | Array of banned countries |

RegionSelect properties

| Prop | Type | Description | | --------------- | --------------------- | ----------------------------------------------------- | | classname | string | accept a class string | | onChange | func | callback function fired when the select value changed | | placeholder | string | placeholder value, default "Region" | | priorityOptions | string[] | Array of regions prioritized in the select list | | whiteList | string[] | Array of allowed regions | | blackList | string[] | Array of banned regions |