react-usa-map-select

React USAMapSelect Component

The USAMapSelect component is a React SVG map of the United States of Americca with simple interactive features. It allows you to highlight and interact with individual states, providing callbacks for mouse events and some customization options for styling.

Live example

• USA Map Select

Installation

npm install react-usa-map-select

Usage

const MyComponent = () => {
 const handleClick = (event) => {
  // Handle click event
  console.log(`Clicked on state: ${event.currentTarget.getAttribute('name')}`);
 };

 const handleMouseEnter = (event) => {
  // Handle mouse enter event
  console.log(`Mouse entered state: ${event.currentTarget.getAttribute('name')}`);
 };

 const handleMouseLeave = () => {
  // Handle mouse leave event
  console.log('Mouse left a state');
 };

 return (
  <>
   <h1>Interactive USA Map</h1>
   <USAMapSelect
    onClick={handleClick}
    onUSAStateMouseEnter={handleMouseEnter}
    onUSAStateMouseLeave={handleMouseLeave}
    showStateNameOnHover={true}
    USAStateOnHoverColor="blue"
    USAStateOnHoverStrokeColor="white"
   />
  </>
 );
};

export default MyComponent;

Props

API

Prop	Type	Default	Description
onClick	(event: React.SyntheticEvent<SVGGElement>) => void	-	Callback function triggered on clicking a state.
onUSAStateMouseEnter	(event?: React.SyntheticEvent<SVGGElement>) => void	-	Callback function triggered on mouse enter over a state.
onUSAStateMouseLeave	(event?: React.SyntheticEvent<SVGGElement>) => void	-	Callback function triggered on mouse leave from a state.
showStateNameOnHover	boolean	false	Boolean indicating whether to display the state name on hover.
USAStateTextColor	keyof ReturnType<typeof colorVariants>	slate	Color variant for the state text if showStateNameOnHover is true. Choose from: slate, white, gray, yellow, green, emerald, blue, purple, orange, pink.
USAStateColor	keyof ReturnType<typeof colorVariants>	gray	Color variant for the state. Choose from: slate, white, gray, yellow, green, emerald, blue, purple, orange, pink.
USAStateOnHoverColor	keyof ReturnType<typeof colorVariants>	slate	Color variant for the state on hover. Choose from: slate, white, gray, yellow, green, emerald, blue, purple, orange, pink.
USAStateOnHoverStrokeColor	keyof ReturnType<typeof colorVariants>	-	Stroke color variant for the state on hover. Choose from the same options as USAStateOnHoverColor.
USAStatePosition	{ x: string, y: string } or "center"	-	Position of the state name relative to the SVG wrapper. If center, the state name will persist the center position relative to the SVG wrapper.

Styling

The USAMapSelect component is built using Tailwind CSS. You can customize the styling of the state name that shows on the top of the map by passing in your own Tailwind CSS classes as props. You can also style the svg wrapper element by passing in a class name to the wrapperClassName prop.

Prop	Type	Default	Description
stateTextClassname	string	-	Class name for the element that renders the state name when showStateNameOnHover is true
wrapperClassName	string	-	Class name for the element that wraps the map.

License

MIT ©