⚛️ @worldkit/react

Pre-built React select components and interactive documentation layout for WorldKit.

Zero-config, accessible React dropdown components for countries, states, cities, timezones, and currencies.

📚 Full Documentation: https://worldkit.in/docs/react

⚡ Features

• 🌍 <CountrySelect />: Country dropdown selector with optional flag emojis.
• 🏛️ <StateSelect />: State/province dropdown dynamically filtered by country ISO2.
• 🏙️ <CitySelect />: World cities selector filtered by country ISO2.
• ⏰ <TimezoneSelect />: IANA timezone picker with UTC offsets.
• 💰 <CurrencySelect />: ISO-4217 currency selector with symbols.
• 📑 <DocumentationTabs />: Embedded interactive documentation tab layout with live V8 edge simulator.

📦 Install

npm install @worldkit/react @worldkit/core
# or
pnpm add @worldkit/react @worldkit/core
# or
yarn add @worldkit/react @worldkit/core

💡 Usage

Cascading Country, State, and City Selectors

import React, { useState } from "react";
import {
  CountrySelect,
  StateSelect,
  CitySelect,
  CurrencySelect,
  TimezoneSelect
} from "@worldkit/react";

export function AddressForm() {
  const [country, setCountry] = useState("US");
  const [state, setState] = useState("CA");
  const [city, setCity] = useState("San Francisco");

  return (
    <form className="form-container">
      {/* 1. Country Select */}
      <CountrySelect
        value={country}
        onChange={(e) => setCountry(e.target.value)}
        showFlag={true}
      />

      {/* 2. State Select (filtered by country) */}
      <StateSelect
        countryIso2={country}
        value={state}
        onChange={(e) => setState(e.target.value)}
      />

      {/* 3. City Select (filtered by country) */}
      <CitySelect
        countryIso2={country}
        value={city}
        onChange={(e) => setCity(e.target.value)}
      />

      {/* 4. Currency Select */}
      <CurrencySelect placeholder="Select preferred currency..." />

      {/* 5. Timezone Select */}
      <TimezoneSelect placeholder="Select timezone..." />
    </form>
  );
}

Interactive Documentation Tab Component

import React from "react";
import { DocumentationTabs } from "@worldkit/react";

export function DocsPage() {
  return (
    <div className="max-w-6xl mx-auto p-6">
      <DocumentationTabs defaultTab="cloudflare" theme="dark" />
    </div>
  );
}

📖 API Reference

| Component | Props | Description | | :--- | :--- | :--- | | <CountrySelect /> | showFlag?: boolean, Standard <select> props | Country selector dropdown | | <StateSelect /> | countryIso2?: string, Standard <select> props | State/Province dropdown | | <CitySelect /> | countryIso2?: string, Standard <select> props | World city dropdown | | <TimezoneSelect /> | Standard <select> props | IANA timezone dropdown | | <CurrencySelect /> | Standard <select> props | ISO currency dropdown | | <DocumentationTabs /> | defaultTab?: string, theme?: "dark" \| "light" | Documentation tab layout |

📐 TypeScript Support

Written in 100% strict TypeScript. Exported component prop interfaces:

import type {
  CountrySelectProps,
  StateSelectProps,
  CitySelectProps,
  BaseSelectProps
} from "@worldkit/react";

🔗 Related Packages

Explore the rest of the WorldKit ecosystem:

• @worldkit/core - Main unified toolkit facade.
• @worldkit/countries - 250+ country dataset.
• @worldkit/currencies - 160+ ISO currencies.
• @worldkit/states - 4,000+ states and provinces.
• @worldkit/cities - Major world cities.

📜 License

MIT © WorldKit