options prop broke vector maps

[ValeryVS]

Reproduce on codesandbox.

Uncomment // options={{ minZoom }} to see the bug.

Workaround: use native maps API through ref.

https://codesandbox.io/s/react-yandex-maps-vector-dqlx3?file=/src/index.js

[mmarkelov]

@ValeryVS I think you should pass zoom param to Map state:

import React, { useState, useCallback } from "react";
import ReactDOM from "react-dom";
import { YMaps, Map } from "react-yandex-maps";

import "./styles.css";

function App() {
  const [minZoom, setMinZoom] = useState(15);

  const setMinZoom8 = useCallback(() => {
    setMinZoom(8);
  }, []);

  const clearMinZoom = useCallback(() => {
    setMinZoom(15);
  }, []);
  return (
    <div className="App">
      <button type="button" onClick={setMinZoom8}>
        setMinZoom8
      </button>
      <button type="button" onClick={clearMinZoom}>
        clearMinZoom
      </button>
      <Map
        // You should change zoom with Map state
        state={{ center: [55.751574, 37.573856], zoom: minZoom }}
        options={{
          vector: true,
          layerVectorRevealThreshold: 0,
          layerVectorCustomization: [
            ...
          ]
        }}
        modules={["vectorEngine.preload"]}
      />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(
  <YMaps
    query={{
      ns: "ymaps" // this nemaspace required for vector maps
    }}
  >
    <App />
  </YMaps>,
  rootElement
);

[ValeryVS]

@mmarkelov Then it will be default zoom, not the minimum zoom — user will be able to zoom out too far.

[mmarkelov]

@ValeryVS got it. If want to set up minZoom, you just need pass it to your options:

     <Map
        instanceRef={setRef}
        defaultState={{ center: [55.751574, 37.573856], zoom: 9 }}
        options={{
          minZoom,
          vector: true,
          ...
         }}
     /> 

[ValeryVS]

I see. Thought that options merged with default options, but it is not. Good, that it works.