moroccan-cities-autocomplete-input v1.0.0

Moroccan Cities Autocomplete Input

A React component for Moroccan cities autocomplete with TypeScript support and Next.js compatibility.

Features

• 🌟 Full TypeScript support
• ⚡ Next.js compatible (App Router & Pages Router)
• 📱 Responsive and customizable
• 🎨 Tailwind CSS ready
• 🔍 Smart search with suggestions
• ⌨️ Keyboard navigation support

Installation

npm install moroccan-cities-autocomplete-input
# or
yarn add moroccan-cities-autocomplete-input
# or
bun add moroccan-cities-autocomplete-input

Usage

With Next.js (App Router)

// app/components/CitySelector.tsx
"use client";

import { MoroccanCityInput } from "moroccan-cities-autocomplete-input";

export default function CitySelector() {
  const [city, setCity] = useState("");

  return (
    <MoroccanCityInput
      value={city}
      onChange={setCity}
      label="City"
      required
      className="block w-full rounded-lg border p-2.5 text-sm"
    />
  );
}

With Next.js (Pages Router)

import { MoroccanCityInput } from "moroccan-cities-autocomplete-input";

export default function CheckoutPage() {
  const [city, setCity] = useState("");

  return (
    <MoroccanCityInput
      value={city}
      onChange={setCity}
      label="City"
      required
      className="block w-full rounded-lg border p-2.5 text-sm"
    />
  );
}

Props

License

MIT

Author

Yassin Slati