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

| Prop | Type | Default | Description | | ----------------------- | ----------------------- | ------------------- | ------------------------------------------- | | value | string | required | The current value of the input | | onChange | (value: string) => void | required | Callback when value changes | | placeholder | string | "Enter a city name" | Input placeholder text | | className | string | "" | CSS classes for the input element | | required | boolean | false | Whether the input is required | | label | string | undefined | Label text for the input | | labelClassName | string | "" | CSS classes for the label | | suggestionsClassName | string | "" | CSS classes for the suggestions container | | suggestionItemClassName | string | "" | CSS classes for individual suggestion items |

License

MIT

Author

Yassin Slati

Support

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