@telegram-apps/react-router-integration

Telegram Mini Apps Navigator integration for react-router-dom.

Installation

pnpm

pnpm i @telegram-apps/react-router-integration

npm

npm i @telegram-apps/react-router-integration

yarn

yarn add @telegram-apps/react-router-integration

Usage

At the moment, this package provides the only 1 function, which creates the integration for react-router-dom Router - useIntegration.

Here is how it could be used:

import { useIntegration } from '@telegram-apps/react-router-integration';
import { initNavigator } from '@telegram-apps/sdk-react';
import { useEffect, useMemo } from 'react';
import {
  Navigate,
  Route,
  Router,
  Routes,
} from 'react-router-dom';

import { IndexPage } from './IndexPage.js';

function App() {
  // Create a new application navigator and attach it to the browser history, so it could modify
  // it and listen to its changes.
  const navigator = useMemo(() => initNavigator('app-navigation-state'), []);
  const [location, reactNavigator] = useIntegration(navigator);

  // Don't forget to attach the navigator to allow it to control the BackButton state as well
  // as browser history.
  useEffect(() => {
    navigator.attach();
    return () => navigator.detach();
  }, [navigator]);

  return (
    <Router location={location} navigator={reactNavigator}>
      <Routes>
        <Route path={'/'} component={IndexPage}/>
        <Route path={'*'} element={<Navigate href={'/'}/>}/>
      </Routes>
    </Router>
  );
}

You can learn more about how to use it real world applications using our React template.