VK Bridge React

React hooks for VK Bridge.

In addition, the library provides other helper functions.

Usage

npm install @vkontakte/vk-bridge @vkontakte/vk-bridge-react

import { useInsets, runTapticImpactOccurred } from '@vkontakte/vk-bridge-react';

// Sends event to client
const App = () => {
  const insets = useInsets();

  const handleClick = () => {
    runTapticImpactOccurred();
  };

  return (
    <div style={{ paddingTop: insets?.top }}>
      <button onClick={handleClick}>Touch me and feel</button>
    </div>
  );
};

Hooks

type UseAppearance = AppearanceType | null;

Hook listens to update the appearance property of the VKWebAppUpdateConfig event. It dispatches the VKWebAppGetConfig event on first initialization.

Note: hook works only for vkBridge.isEmbedded() mode.

interface UseAdaptivity {
  type: null | AdaptivityType;
  viewportWidth: number;
  viewportHeight: number;
}

type UseInsets = {
  top: number;
  right: number;
  bottom: number;
  left: number;
} | null;

Hook listens to update the insets property of the VKWebAppUpdateConfig event.

Note: when the virtual keyboard is visible, inset of bottom corresponds to 0.

Helpers