import React from 'react';
import ReactDOM from 'react-dom';
import {AustraliaMap} from 'react-australia-map';
 
const mapHandler = event => {
  alert(event.target.dataset.name);
};
 
const App = () => (
  <div>
    <AustraliaMap fill="#54788b" strokeWidth={1} width={350} height={250}  onClick={mapHandler} />
  </div>
);
 
const appRoot = document.createElement('div');
document.body.appendChild(appRoot);
ReactDOM.render(<App />, appRoot);

import React from 'react';
import ReactDOM from 'react-dom';
import {AustraliaMap} from 'react-australia-map';
 
const customStyling = {
  'NSW': {
    'fill': '#86D9E1',
    'showLabels': true,
    'label': {
      'name': '42%',
      'textAnchor': 'middle',
      'x': 230,
      'y': 167,
      'fill': 'black',
      'fontSize': 18,
      'fontFamily': 'Courier New'
    }
  },
  'NT': {
    'fill': '#1e2032',
    'showLabels': true,
    'label': {
      'name': '13%\n(average)',
      'textAnchor': 'middle',
      'fill': 'white',
      'fontSize': 12,
      'fontFamily': 'Arial'
    }
  }
};
 
const App = () => (
  <div>
    <AustraliaMap fill="#ffcb03" stroke="#ffffff" strokeWidth={1} width={350} height={250} customize={customStyling} />
  </div>
);
 
const appRoot = document.createElement('div');
document.body.appendChild(appRoot);
ReactDOM.render(<App />, appRoot);