@yandex/ymaps3-drawer-control

ymaps3-drawer-control package

---

Yandex JS API package

How use

The package is located in the dist folder:

• dist/types TypeScript types
• dist/esm es6 modules for direct connection in your project
• dist/index.js Yandex JS Module

Recommended use YMapButtonExample as usual npm package:

npm install @yandex/ymaps3-drawer-control

and dynamic import

main();
async function main() {
  await ymaps3.ready;

  const {YMapDrawerControl} = await ymaps3.import('@yandex/ymaps3-drawer-control');

  map = new ymaps3.YMap(document.getElementById('app'), {location: LOCATION}, [
    /* any map child */
  ]);

  let open = false;
  const drawerControl = new YMapDrawerControl({
    position: 'left',
    width: 300,
    open,
    onOpenChange: (newOpenValue) => {
      open = newOpenValue;
      drawerControl.update({open: newOpenValue});
    },
    content: () => {
      const container = document.createElement('div');
      const title = document.createElement('h1');
      title.textContent = 'Hello world';
      container.appendChild(title);
      const closeButton = document.createElement('button');
      closeButton.textContent = 'Close';
      closeButton.addEventListener('click', () => {
        open = false;
        drawerControl.update({open: false});
      });
      container.appendChild(closeButton);
      return container;
    }
  });
  map.addChild(drawerControl);
}

main();
async function main() {
  const [ymaps3React] = await Promise.all([ymaps3.import('@yandex/ymaps3-reactify'), ymaps3.ready]);
  const reactify = ymaps3React.reactify.bindTo(React, ReactDOM);

  const {useState, useCallback} = React;
  const {YMap} = reactify.module(ymaps3);
  const {YMapDrawerControl} = reactify.module(await ymaps3.import('@yandex/ymaps3-drawer-control'));

  const App = () => {
    const [open, setOpen] = useState(false);
    const content = useCallback(
      () => (
        <div>
          <h1>Hello world!</h1>
          <button onClick={() => setOpen(false)}>Close</button>
        </div>
      ),
      []
    );
    const onOpenChange = (value: boolean) => {
      setOpen(!value);
    };

    return (
      <YMap location={LOCATION}>
        {/* any map child */}
        <YMapDrawerControl position="left" width={300} content={content} open={open} onOpenChange={onOpenChange} />
      </YMap>
    );
  };
}

You also need to import css styles into your project:

/* index.css */
@import '@yandex/ymaps3-drawer-control/dist/esm/index.css';

Usage without npm

You can use CDN with module loading handler in JS API on your page.

Just use ymaps3.import:

const pkg = await ymaps3.import('@yandex/ymaps3-drawer-control');

By default ymaps3.import can load self modules. If you want also load your package, should register cdn:

ymaps3.import.registerCdn('https://cdn.jsdelivr.net/npm/{package}', '@yandex/ymaps3-drawer-control@latest');

YMapDrawerControl props description

Name	Type	Default	Description
position	"left", "right", "top", "bottom"	"left"	Specifies which side of the map the drawer opens from.
transitionDuration	number, {open: number; close: number}	500	Duration of the open/close animation in milliseconds.
open	boolean		Flag indicating whether the drawer is open.
width	string | number		Fixed width of the drawer. If not specified, the drawer adjusts to the content's width.
maxWidth	string | number		Maximum width of the drawer.
minWidth	string | number		Minimum width of the drawer.
height	string | number		Fixed height of the drawer. If not specified, the drawer adjusts to the content's height.
maxHeight	string | number		Maximum height of the drawer.
minHeight	string | number		Minimum height of the drawer.
onOpenChange	(open: boolean) => void		Drawer open status change handler.
verticalTriggerPosition	number	"center"	Vertical position of the button that opens the drawer.
horizontalTriggerPosition	number	"center"	Horizontal position of the button that opens the drawer.
content	() => HTMLElement | YMapEntity		Function that returns the drawer's content as an HTMLElement or an YMapEntity.