@tenqube/location-history NPM

❗ development halted.

@tenqube/locaiton-history

This is a React Hook that can save and use location information in an array format according to history changes.

'@tenqube/locaiton-history' detects changes in the DOM and saves the location history, so it must be used with a routing-related library such as 'react-router-dom'.

Installation

$ npm install @tenqube/locaiton-history

Quick Start

For sample configuration, we used 'react-router-dom'.

import React, { useEffect } from 'react'
import { createRoot } from 'react-dom/client'
import { createBrowserRouter, RouterProvider, Link } from 'react-router-dom'
import LocaitonHistoryProvider, { useLocationHistory, ILocationHistory } from '@tenqube/locaiton-history'

const White = () => { const history: ILocationHistory = useLocationHistory()

useEffect(() => { console.log(history) }, history)

return (

<div>
  <h1>white</h1>
  <Link to="/black?foo=bar">/black?foo=bar</Link>
</div>

) }

const Black = () => { const history: ILocationHistory = useLocationHistory()

useEffect(() => { console.log(history) }, history)

return (

<div>
  <h1>black</h1>
  <Link to="/">/</Link>
</div>

) }

const router = createBrowserRouter( { path: "/", element: }, { path: "/black", element: } )

createRoot(document.getElementById("root") as HTMLElement).render( )

## Interfaces
```ts
interface ILocationHistory {
  list: ILocationVO[],
  before: ILocationVO | null
}

interface ILocationVO {
  readonly hash: string
  readonly host: string
  readonly hostname: string
  readonly href: string
  readonly origin: string
  readonly pathname: string
  readonly port: string
  readonly protocol: string
  readonly search: string
  
  readonly searchObj: unknown
  readonly hashObj: unknown
}