React Rwanda Map

An interactive and customizable SVG map of Rwanda for React applications. This component allows you to render a detailed map of Rwanda with interactive provinces that respond to hover events and can trigger custom callbacks.

Installation

npm install react-rwanda-map

or

yarn add react-rwanda-map

Peer Dependencies

This package requires the following peer dependencies:

npm install clsx @radix-ui/react-tooltip

Usage

import { RwandaMap } from 'react-rwanda-map';
import 'react-rwanda-map/dist/index.css'; // Import styles

function App() {
  const handleProvinceSelect = (province) => {
    if (province) {
      console.log(`Selected province: ${province}`);
    }
  };

  return (
    <div style={{ width: "100%", height: "600px" }}>
      <RwandaMap 
        selectedColor="#fa9e90"
        defaultColor="#E5E7EB"
        strokeColor="#fa9e90"
        provinceNameColor="#302d2c"
        onProvinceSelect={handleProvinceSelect}
      />
    </div>
  );
}

Props

Prop	Type	Default	Description
selectedColor	string	'#3B82F6'	Color of the province when hovered
defaultColor	string	'#E5E7EB'	Default color of provinces
strokeColor	string	'#4B5563'	Color of province borders
height	number	600	Height of the map container in pixels
scale	number	0.95	Scale factor for the SVG map
position	{ x: number, y: number }	{ x: 50, y: 50 }	Position offset of the map within its container
onProvinceSelect	(province: string | null) => void	undefined	Callback function triggered when a province is selected or deselected
provinceNameColor	string	'#FFFFFF'	Color of the province name in the tooltip

Features

• Interactive SVG map of Rwanda with all provinces
• Customizable colors for provinces, borders, and tooltips
• Responsive design that scales to fit its container
• Accessible with proper ARIA attributes
• Tooltips showing province names on hover
• Callback support for province selection events

Examples

Custom Colors

<RwandaMap
  selectedColor="#FF5733"
  defaultColor="#DAE1E7"
  strokeColor="#2D3748"
  provinceNameColor="#000000"
/>

Custom Size and Position

<RwandaMap
  height={800}
  scale={1.2}
  position={{ x: 30, y: 20 }}
/>

With Selection Callback

<RwandaMap
  onProvinceSelect={(province) => {
    if (province) {
      fetchDataForProvince(province);
    } else {
      resetProvinceData();
    }
  }}
/>

Tailwind CSS Integration

This component uses Tailwind CSS for styling. If you're using Tailwind in your project, make sure to configure it to include the component's styles:

// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
    './node_modules/react-rwanda-map/dist/**/*.{js,mjs}',
  ],
  // rest of your config
};

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

MIT

Author

Igwaneza Bruce