How to center screen on a specific hex?

[henrybzhang]

I assume the Layout.origin should be used, but I can't seem to figure out the correct units to set it to. I currently have

const [hexagons, setHexagons] = useState(GridGenerator.hexagon(3));
...
<HexGrid width={windowWidth} height={windowHeight}>
  <Layout
    size={{ x: hexSize, y: hexSize }}
    flat={true}
    origin={{ x: -10, y: 0 }}
  >
    {hexagons.map((hex, i) => (
      <Hexagon key={i} q={hex.q} r={hex.r} s={hex.s} fill={'black'} />
    ))}
  </Layout>
</HexGrid>

Any help would be appreciated!

[jannikbuschke]

try to use the viewBox prop on the HexGrid. The HexGrid is basically a svg component with the following default props

  width = 800,
  height = 600,
  viewBox = "-50 -50 100 100",

the first two values of the viewBox should allow you to "position" your element. I dont yet understand svg enough to explain it properly, but hope this helps