A modern, accessible, and user-friendly React component for selecting locations in Rwanda
View Demo · Installation · Usage · Report Bug · Request Feature
- Rwanda Location Selector
- Clone the repository
- Navigate to the project directory
- Install dependencies
- or
- or
- or
- Start the development server
- 🌐 Hierarchical Selection: Navigate through Rwanda's administrative divisions (Provinces → Districts → Sectors → Cells → Villages)
- 🔄 Cascading Updates: Each selection level automatically updates dependent fields
- 🎭 Smooth Animations: Beautiful transitions powered by Framer Motion
- 📱 Fully Responsive: Works perfectly on all device sizes
- 🧩 Form Integration: Built with React Hook Form and Zod validation
- 🔍 Loading States: Clear visual feedback during data loading
- 🎨 Modern UI: Clean design with shadcn/ui components
- 🚀 Type-Safe: Full TypeScript support
- 🌙 Accessibility: ARIA-compliant and keyboard navigable
- 🔒 Validation: Built-in form validation with helpful error messages
- 🎯 Zero Dependencies: No external API calls required, uses local data
Rwanda is organized into a hierarchical administrative structure:
| Level | Count | Description |
|---|---|---|
| Provinces | 5 | The highest administrative division |
| Districts | 30 | Subdivisions of provinces |
| Sectors | 416 | Subdivisions of districts |
| Cells | 2,148 | Subdivisions of sectors |
| Villages | 14,837 | The smallest administrative units |
This component makes it easy to navigate this complex structure with a user-friendly interface.
Check out the live demo of the Rwanda Location Selector:
- Node.js 18.0.0 or later
- npm, yarn, pnpm, or bun
# Clone the repository
git clone https://github.com/hbapte/rwanda-location.git
# Navigate to the project directory
cd rwanda-location
# Install dependencies
npm install
# or
yarn install
# or
pnpm install
# or
bun install
# Start the development server
npm run dev