# Introduction

React-leaflet-cluster is a plugin for [react-leaflet](https://react-leaflet.js.org/). A wrapper component of [Leaflet.markercluster](https://github.com/Leaflet/Leaflet.markercluster). Ready to be integrated into your React.js application to create beautifully animated Marker Clustering functionality.<br>

![You can customize shapes of clusters.](https://4005277537-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MTQiwvejAl28bPgYUJy%2F-MU3zbPciusOwFDRjAnM%2F-MU3zlBoEGt4TkYHgqve%2Fshowcase.gif?alt=media\&token=2ece0050-542b-4a8f-b4b2-d2b34cdc7e88)

### Installation

```bash
yarn add react-leaflet-cluster
```

Or with npm:

```objectivec
npm i react-leaflet-cluster
```

Make sure that you've installed `react-leaflet` and `leaflet`.

### Prerequisites

```objectivec
"react": "16.x",
"leaflet": "1.7.x",
"react-leaflet": "3.0.x"
```

### Setting up your project

```jsx
import MarkerClusterGroup from 'react-leaflet-cluster'
import {MapContainer, Marker } from 'react-leaflet'
import 'leaflet/dist/leaflet.css'
import {addressPoints} from './realworld'

const Demo = () => {
  return (
    <MapContainer
      style={{height: '500px'}}
      center={[38.9637, 35.2433]}
      zoom={6}
      scrollWheelZoom={true}
    >
      <MarkerClusterGroup
        chunkedLoading
      >
        {(addressPoints as AdressPoint).map((address, index) => (
          <Marker
            key={index}
            position={[address[0], address[1]]}
            title={address[2]}
            icon={customIcon}
          ></Marker>
        ))}
      </MarkerClusterGroup>
    </MapContainer>
  )
}
```