React Hook: useNavigationHistory

React hook for creating and tracking navigation history

Install

npm i @jharrilim/use-navigation-history

Example

import React, { FC, useState } from 'react';
import { useNavigationHistory } from '@jharrilim/use-navigation-history';

interface NavigatorProps {
  routes?: string[];
}

const Navigator: FC<NavigatorProps> = ({ routes = ['Home'] }) => {
  const history = useNavigationHistory(...routes);
  const [userInput, setUserInput] = useState('');

  return (
    <div style={{ display: 'flex', flexDirection: 'column', flex: '1', justifyItems: 'center' }}>
      <h1 data-testid={'title'}>{history.current}</h1>
      <hr />
      <input
        value={userInput}
        onChange={({ target: { value } }) => setUserInput(value)}
        data-testid={'userInput'}
      />
      <button
        onClick={() => history.backwards()}
        data-testid={'backwardsButton'}
      >
        Previous
      </button>
      <button
        onClick={() => {
          history.forwards(userInput === '' ? undefined : userInput);
          setUserInput('');
        }}
        data-testid={'forwardsButton'}
      >
        Next
      </button>
    </div>
  );
};