> For the complete documentation index, see [llms.txt](https://akursat.gitbook.io/marker-cluster/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://akursat.gitbook.io/marker-cluster/master.md).

# 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.](/files/-MU3zlBoEGt4TkYHgqve)

### 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>
  )
}
```