@vbss-ui/history-nav

A customizable and accessible History Navigation component.

The History Navigation component provides a simple way to navigate through history with back and forward buttons. It's built with accessibility in mind and offers various styling options and customization features.

Installation

To install only the History Navigation component, run one of the following commands:

npm install @vbss-ui/history-nav
# or
yarn add @vbss-ui/history-nav

---

Usage

import { HistoryNav } from "@vbss-ui/history-nav"

export const App = () => {
  return (
    <HistoryNav
      leftIcon={<ChevronLeftIcon />}
      rightIcon={<ChevronRightIcon />}
      leftOnClick={() => window.history.back()}
      rightOnClick={() => window.history.forward()}
    />
  )
}

---

Examples

With Custom Icons

import { HistoryNav } from "@vbss-ui/history-nav"
import { ArrowLeft, ArrowRight } from "@phosphor-icons/react"

export const App = () => {
  return (
    <HistoryNav
      leftIcon={<ArrowLeft />}
      rightIcon={<ArrowRight />}
      leftOnClick={() => window.history.back()}
      rightOnClick={() => window.history.forward()}
    />
  )
}

With Custom Gap

import { HistoryNav } from "@vbss-ui/history-nav"

export const App = () => {
  return (
    <HistoryNav
      gap="lg"
      leftIcon={<ChevronLeftIcon />}
      rightIcon={<ChevronRightIcon />}
      leftOnClick={() => window.history.back()}
      rightOnClick={() => window.history.forward()}
    />
  )
}

With Custom Button Props

import { HistoryNav } from "@vbss-ui/history-nav"

export const App = () => {
  return (
    <HistoryNav
      buttonsProps={{
        size: "icon-lg",
        variant: "secondary"
      }}
      leftIcon={<ChevronLeftIcon />}
      rightIcon={<ChevronRightIcon />}
      leftOnClick={() => window.history.back()}
      rightOnClick={() => window.history.forward()}
    />
  )
}

---

Props

Prop	Type	Description	Default
gap	xs | sm | md | lg | xl	Sets the gap between buttons.	md
buttonsProps	ButtonProps	Props passed to the underlying buttons. See Button Props	-
leftOnClick	() => void	Function called when the left button is clicked.	-
rightOnClick	() => void	Function called when the right button is clicked.	-
leftIcon	React.ReactNode	Icon displayed in the left button.	-
rightIcon	React.ReactNode	Icon displayed in the right button.	-
ref	React.Ref	Allows accessing the underlying DOM element.	-
className	string	Additional CSS classes for custom styling.	-
style	React.CSSProperties	Additional style for custom styling.	-

---

Customization

You can extend the default styles by passing custom styles using className or style.

<HistoryNav
  leftIcon={<ChevronLeftIcon />}
  rightIcon={<ChevronRightIcon />}
  style={{
    backgroundColor: "red"
  }}
  leftOnClick={() => window.history.back()}
  rightOnClick={() => window.history.forward()}
/>

Or you can use the default component classNames.

.historyNavContainer {
  .button {
    /* ...Button classNames */
    background-color: red;
  }
}

import "./custom.css"

export const App = () => {
  return (
    <HistoryNav
      leftIcon={<ChevronLeftIcon />}
      rightIcon={<ChevronRightIcon />}
      leftOnClick={() => window.history.back()}
      rightOnClick={() => window.history.forward()}
    />
  )
}

Customizing Colors (Optional)

If you want to customize the colors used in the vbss-ui components, you can create a custom CSS file with your desired color scheme. Create a .css file (e.g., custom-colors.css) and define your colors using HSL format as follows:

:root {
  --background: 0 0% 100%;
  --primary: 117 100% 47%;
  --secondary: 248 53% 58%;
}

After creating your custom colors file, import it into your main file:

import "./custom-colors.css";

This will override the default colors with your custom colors.

---

More

For more information, please visit the repository or check out the documentation at ui.vbss.io/history-nav.

To see the components in action, run Storybook locally. Navigate to the repository directory and execute:

npm run storybook