Brasil Map React - Exemplos Práticos

Exemplos Práticos

Explore diferentes formas de usar o Brasil Map React em seus projetos.

1. Uso Básico

O exemplo mais simples - apenas renderizar o mapa do Brasil.

import { BrasilMap } from '@syntelnet/brasil-map-react'
import '@syntelnet/brasil-map-react/dist/style.css'

function App() {
  return <BrasilMap />
}

2. Com Callbacks de Interação

Capture cliques em estados e cidades para criar interatividade.

function App() {
  return (
    <BrasilMap
      onStateClick={(uf) => console.log('Estado:', uf)}
      onCityClick={(city) => console.log('Cidade:', city)}
      onInfoChange={(info) => console.log('Info:', info)}
    />
  )
}

Clique em um estado ou cidade e veja o resultado abaixo:

3. Destacar Cidades Específicas

Destaque cidades importantes usando IDs IBGE.

const highlightedCities = {
  'SP': new Set(['3550308', '3509502']), // São Paulo, Campinas
  'RJ': new Set(['3304557']),            // Rio de Janeiro
  'BA': new Set(['2927408'])             // Salvador
}

<BrasilMap highlightedCities={highlightedCities} />

4. Customização de Tamanho

Ajuste a largura e altura do mapa conforme sua necessidade.

<BrasilMap
  width={1200}
  height={800}
  showStateLabels={true}
/>

5. Sem Labels de Estados

Renderize o mapa sem as siglas dos estados.

<BrasilMap showStateLabels={false} />

6. Múltiplos Mapas na Mesma Página

Você pode usar vários componentes BrasilMap na mesma página.

<div className="maps-grid">
  <BrasilMap width={400} height={400} />
  <BrasilMap width={400} height={400} />
</div>

7. Usando o Hook useBrasilMap

Para casos mais avançados, use o hook diretamente.

import { useBrasilMap } from '@syntelnet/brasil-map-react'

function CustomMap() {
  const mapRef = useRef(null)
  const { renderBrasil, loadState, isStateView } = useBrasilMap({
    containerRef: mapRef,
    onStateClick: (uf) => console.log(uf)
  })

  return <div ref={mapRef} />
}

🚀 Instalação

npm install @syntelnet/brasil-map-react

Consulte a documentação completa para mais detalhes.