Add 200+ Beautiful Maps to Your React App with React-map

The React-map library provides pre-made SVG map components for over 200 countries and continents. This saves developers the time and effort of having to build custom maps from scratch. The maps have a very small file size, with even the largest map under 800kB.

Developers can customize the appearance and behavior of the maps in their apps using the set of props available on each component. For example, you can set the size, stroke width and color, fill color on hover and more. Any region of the map that is clicked triggers a callback function, allowing things like toggling visibility or loading data for that region.

How to use it:

1. Install and import a map of your choice.

# NPM
$ npm install @react-map/{your_country}
import World from "@react-map/world";

2. Add the component to your app.

<World />

3. Available component props.

size?: number;
mapColor?: string;
strokeColor?: string;
strokeWidth?: number;
hoverColor?: string;
onSelect: (state: string) => void;

Preview:

Add 200+ Beautiful Maps to Your React App with React-map

Download Details:

Author: shubhexists

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/shubhexists/react-maps

License: MIT

Tags:

Add Comment