import React , { ComponentProps } from 'react' ; import WorldMap from 'react-svg-worldmap' ; import { populationData } from '../data/CountryData' ; const createTextLabels = ( width ) => { const labels = [ { label : 'Atlantic' , x : 0.37 * width , y : 0.39 * width } , { label : 'Indian' , x : 0.69 * width , y : 0.57 * width } , { label : 'Pacific' , x : 0.083 * width , y : 0.48 * width } , { label : 'Arctic' , x : 0.75 * width , y : 0.058 * width , style : { fill : 'blue' } } , ] ; if ( width < 550 ) { labels . forEach ( ( label ) => { label . style = { ... label . style , fontSize : '70%' } ; } ) ; } return labels ; } ; export default function App ( ) { return ( < WorldMap title = "The ten highest GDP per capita countries" size = "responsive" frame data = { populationData } textLabelFunction = { createTextLabels } / > ) ; }