Remove onClick border

[wegory]

Hello hello. This might be a dumb question but when I clicked into a Geography (in all of the examples from the documentation), a rectangle with a blue-white border containing the clicked Geography appears. How do I prevent that from being visible? :)

[zimrick]

If you want to remove that you can just set outline to none for the geography via the custom style prop.

<Geography
  style={{
    default: { outline: "none" },
    hover: { outline: "none" },
    pressed: { outline: "none" },
  }}
/>

Hope this helps
Cheers

[wegory]

Ahhh got it! Cheers mate! :)

[ngothiensinh]

Style component. You also need the setting for focus out too.

import { Geography } from 'react-simple-maps';
import styled from 'styled-components';

const StyledGeography = styled(Geography)`
  &:active {
    outline: none;
  }

  &:focus,
  &:focus-visible {
    outline: none;
  }
`;

export default StyledGeography;