react-easy-map v1.1.8

Link to the documentation in storybook

Link to git-hub

Basic react map usage

import { Map } from 'react-easy-map'

const data = [
	{id: 1, name: 'Maga'},
	{id: 2, name: 'Kama'},
	{id: 3, name: 'Alex'},
]

const BasicMap = () => {
	return (
		<>
			{data.map((item) => (
				<Item key={item.id} {...item} />
			))}
		</>
	)
}

const Item = (item) => <div>{item.name}</div>

With react-easy-map usage

WARNING prop keyName must be unique for each object

import { Map } from 'react-easy-map'

const EasyMap = () => {
	return (
		<>
			<Map data={data} item={Item} keyName={'id'}/>
		</>
	)
}

const Item = (item) => <div>{item.name}</div>

With hoc , example with mobx-react

import { observer } from 'mobx-react'
import { MapWithHoc } from 'react-easy-map'

// It is recommended to put it in a separate file
export const ObserverMap = MapWithHoc(observer)
//

const EasyMap = () => {
	return (
		<>
			<ObserverMap data={data} item={Item} keyName={'id'}/>
		</>
	)
}

const Item = (item) => <div>{item.name}</div>

Type props components in react-easy-map

import { MapProps, HocProps } from 'react-easy-map'