Create beautiful,interactive maps with a vivid collection of over 200+ maps ranging from countries, continents and others!
Drop of a ✨ if you are here. It would mean a lot : )
Total downloads: 124362
Navigate to your favourite map component and install it in your react project using
npm install @react-map/{your_country}
That is it! you are now ready to use the map components.
Each component you add has a fixed set of parameters that you can use to tweek around the map's behaviour.
[!IMPORTANT] The 'type' component is mandatory for every component in the latest version of react-map due to the introduction of different types of map behaviours.
export interface props = {
type: 'select-single' | 'select-multiple';
size?: number;
mapColor?: string;
strokeColor?: string;
strokeWidth?: number;
hoverColor?: string;
selectColor?: string;
hints?: boolean;
hintTextColor?: string;
hintBackgroundColor?: string;
hintPadding?: string;
hintBorderRadius?: string;
onSelect?: (state: string, selectedStates?: string[]) => void;
}
type
- It takes value either select-single
or select-multiple
to alter the selection behaviour of the map. In select-single
, only one state/region can be selected at one time, whereas in select-multiple
, you can select multiple regions at once.size
- It helps you increase or decrease the map size according to your requirement.mapColor
- It changes the default colour of the Map elements.strokeColor
- It defines the colour with which the borders are represented.strokeWidth
- It represents the width of the borders.hoverColor
- It is the colour of the component that is hovered upon.selectColor
- It is the coulour of the component(s) that is selected.hints
- This is a boolean parameter that displays the name of the region/state when it is hovered on.hintTextColor
- If hint is enabled, this parameter would decide the colour of the text in which hints are displayed.hintBackgroundColor
- If hint is enabled, this parameter would decide the background colour of the hints that are displayed.hintPadding
- If hint is enabled, this parameter would decide the Padding of the hints that are displayed.hintBorderRadius
- If hint is enabled, this parameter would decide the Border Radius of the hints that are displayed.onSelect
- It helps you decide what to do upon clicking on a specific component in a map (say city). If the state is select-multiple
, then the function can have two parameters, (state: string, selectedStates?: string[])
, state
is the latest selected state and selectedState
is an array of all the states that are selected. If the state is select-single
, then the onSelect
function takes in a single state
parameter, that is the code of the latest selected state.Each element in a map returns a string, that represents the name of the region. That could be used to add different functionality based on the region that is clicked.
React Map components are customizable and can be easily used with whichever library you want! For example -
react-toastify
// Import the required dependencies
import World from "@react-map/world";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
// Define the onselect function that takes in a name
const toast = (sc) => {
toast(sc);
};
// Call that within the component
<World onSelect={toast} size={1600} hoverColor="orange" type = 'select-single'/>
<ToastContainer />
react-router-dom
// Import the required dependencies
import World from "@react-map/world";
import { useNavigate } from "react-router-dom";
// Define the onselect function that takes in a name
const a = useNavigate();
const redirect = (sc) => {
// Assuming you have defined your routes
a(`${sc}`);
};
// Call that within the component
<World onSelect={redirect} size={1600} hoverColor="orange" type = 'select-single'/>
If you find this project helpful, consider buying me a coffee!
If you read till here, thanks for taking interest in this. Hope I could be useful for you :)