Skip to content

Хуки

Aleksandr Kuznetsov edited this page Oct 31, 2023 · 3 revisions

useRouterView

Для навигации по View нужно воспользоваться хуком useRouterView:

import { useRouterView } from "@kokateam/router-vkminiapps";
const [view, toView] = useRouterView();

В качестве параметров хук возвращает активную view и функцию для навигации по View.

Параметр Тип Описание
view string Текущая активная View
toView string or number Если будет передан string, то произойдет навигация на эту view. Если number (-1, -2 и etc), то навигация назад конкретно по истории всех View's

useRouterPanel

Для навигации по Panel нужно воспользоваться хуком useRouterPanel:

import { useRouterPanel } from "@kokateam/router-vkminiapps";
const [panel, toPanel] = useRouterPanel();

В качестве параметров хук возвращает объект и функцию для навигации по View.

Параметр Тип Описание
panel { active: string; panels: string[] } active - текущая активная Panel. panels - массив из id панелей в порядке открытия
toPanel string or number Логика как в useRouterView

useRouterBack

Для навигации назад нужно воспользоваться хуком useRouterBack:

import { useRouterBack } from "@kokateam/router-vkminiapps";
const toBack = useRouterBack();

В данном случае допустимо любое название для функции этого хука. То есть: toBack, toRouterBack или superMegaBack

Параметр Тип Описание
toBack number Навигация назад по всему приложению, принимает только отрицательные числа, как кол-во шагов назад

useRouterPopout

Для навигации по попаутам нужно воспользоваться хуком useRouterPopout:

import { useRouterPopout } from "@kokateam/router-vkminiapps";
const [popout, toPopout] = useRouterPopout();

В качестве параметров хук возвращает текущий popout и функцию для отображения попаута.

Параметр Тип Описание
popout any Текущий активный popout, нужно передать в SplitLayout как параметр popout
toPopout any Принимает любой тип данных, для закрытие попаута можно воспользоваться этим же методом: toPopout() или toPopout(null)

useRouterModal

Для навигации по модалкам нужно воспользоваться хуком useRouterModal:

import { useRouterModal } from "@kokateam/router-vkminiapps";
const [activeModal, toModal] = useRouterModal();

В качестве параметров хук возвращает id активной модалки и функцию для отображения модального окна.

Параметр Тип Описание
activeModal null or string ID активного модального окна, если его нет, то возвращается null
toModal number or string Для отображения модального окна, нужно передать его id, если передать number, то будет выполнена навигация назад

useRouterSettings

Для изменения или получения настроек нужно воспользоваться хуком useRouterModal:

import { useRouterSettings } from "@kokateam/router-vkminiapps";
const [settings, setSettings] = useRouterSettings();

Описание настроек

Параметр Тип Начальное состояние Описание
isSwipeBack boolean true Состояние вкл\выкл SwipeBack в приложении
isInternal boolean false Является ли приложение internal. При включении поддерживаем соответствующие функциональности для internal, например, отправляем в нужный момент события VKWebAppEnableSwipeBack и VKWebAppDisableSwipeBack
isHash boolean true Состояние вкл\выкл хеша в приложении. При включении, в URL отображаем хеш и поддерживаем навигацию напрямую по хешу
isBack boolean true Состояние вкл\выкл навигации назад. Может пригодиться в заглушках, откуда нельзя выполнять навигацию назад (отсутствие интернета, бан в приложении и тд)
defaultView string "" Дефолтная View. Можно переопределить до иницилизации приложения
defaultPanel string "" Дефолтная Panel. Можно переопределить до иницилизации приложения

⚠️⚠️⚠️ Внимание!

Сейчас работают только такие настройки:

  1. isSwipeBack
  2. isInternal
  3. isBack

Изменение настроек

Хук useRouterSettings() возвращает массив, где второй параметр как раз работает как функция изменения настроек. Указывать все настройки для хука не нужно, пример использования:

import { useRouterSettings } from "@kokateam/router-vkminiapps";
const [, setSettings] = useRouterSettings();

setSettings({ isSwipeBack: false }) // поменялось только isSwipeBack на false
setSettings({ isInternal: true, isBack: false }) // поменялись только isInternal и isBack. Состояние isSwipeBack=false сохранилось