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 oumain.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 etabKey
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