@vkontakte/vk-bridge-react

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

Name	Return type	Description
useAppearance()	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.
useAdaptivity()	interface UseAdaptivity { type: null | AdaptivityType; viewportWidth: number; viewportHeight: number; }	Hook listens to update the adaptivity property of the VKWebAppUpdateConfig event.
useInsets()	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

Name	Return type	Description
runTapticImpactOccurredAsync	Promise<boolean>	Dispatches VKWebAppTapticImpactOccurred event if supported. Returns a Promise that resolves to true if the event was dispatched, or false if not supported.