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
• 🇲🇦 Complete list of Moroccan cities
• 🪶 Lightweight with zero dependencies

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";
import { useState } from "react"; // Don't forget to import useState

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";
import { useState } from "react"; // Don't forget to import useState

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"
    />
  );
}

Basic Usage with Custom Styling

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

function App() {
  const [city, setCity] = useState("");

  return (
    <MoroccanCityInput
      value={city}
      onChange={setCity}
      placeholder="Select your city"
      className="input-class"
      suggestionsClassName="suggestions-container"
      suggestionItemClassName="suggestion-item"
    />
  );
}

Props

License

MIT

Author

Yassin Slati

Support

If you encounter any issues or have questions, please file them in the issues section on GitHub.