import React from 'react' ; import WorldMap , { CountryContext , Data } from 'react-svg-worldmap' ; const data = [ { country : 'cn' , value : 5 } , { country : 'us' , value : 10 } , { country : 'ru' , value : 7 } , ] ; const stylingFunction = ( { countryValue , countryCode , minValue , maxValue , color , } ) => { const opacityLevel = countryValue ? 0.1 + ( 1.5 * ( countryValue - minValue ) ) / ( maxValue - minValue ) : 0 ; return { fill : countryCode === 'US' ? 'blue' : color , fillOpacity : opacityLevel , stroke : 'green' , strokeWidth : 1 , strokeOpacity : 0.2 , cursor : 'pointer' } ; } ; export default function App ( ) { return ( < WorldMap color = { 'red' } tooltipBgColor = { '#D3D3D3' } title = "Custom Styles Map" valueSuffix = "points" data = { data } frame = { true } styleFunction = { stylingFunction } / > ) ; }