Instalação

Instale session-storage-tabs usando npm ou yarn

  npm install @abner.dev/session-storage-tabs

  yarn add @abner.dev/session-storage-tabs

Uso/Exemplos

• Configure o projeto no arquivo raiz _page.tsx no nextjs ou main.tsx no reactjs:

import { TabContextProvider } from '@abner.dev/session-storage-tabs'

function App() {
  return (
    <TabContextProvider>
      <Component />
    <TabContextProvider/>
  )
}

• O proximo passo é pegar os valores de quantas abas do seus sistema estão abertas em seu navegador, por isso criei duas variaveis importantes sessionId que indentifica o id do navegador e tabKey que indentifica a aba que o usuário está acessando no momento:

import { useContext } from "react";
import { TabContext, TabProps } from "@abner.dev/session-storage-tabs";

function Index() {
  const { sessionId, tabKey }: TabProps = useContext(TabContext);

  return (
    <div>
      <span>{sessionId}<span/>
      <span>{tabKey}<span/>
    <div/>
  );
}

Demonstração

Stack utilizada

Front-end: React + Vite + Context + Typescript

Back-end: BrowserTabTracker