Skip to content

README.md

Latest commit

 

History

History
43 lines (30 loc) · 2.48 KB

README.md

File metadata and controls

43 lines (30 loc) · 2.48 KB

Summary of DifferenceNavigation React Component

The DifferenceNavigation component is a reusable navigation control designed for stepping through a series of items, such as pages, variations, or other items in sequence. It is particularly useful for navigating between previous and next items in a list. This component can be easily customized with different labels and used for navigation in various contexts.

Props

  • differenceId (number): The current index or ID of the item being displayed (e.g., current page or variation).
  • setDifferenceFocus (function): A callback function to change the current item focus. It is invoked when a user clicks the next or previous button to switch between items.
  • totalDifferences (number): The total number of items to navigate through. This value is used to disable buttons at the start and end of the navigation.
  • keyword (string) (optional): A term used to label the navigation. Defaults to "variation". It is displayed in the label between the next and previous buttons.
  • plural (string) (optional): A plural form of the keyword used for the message when there are no items to display. Defaults to "variations".

Key Features

  • Next and Previous Buttons: The component displays "Previous" and "Next" buttons for navigating through items. These buttons are disabled when the user is at the beginning or end of the list.
  • Labeling: In the middle, a label is displayed, indicating the current position within the list (e.g., "Variation 1 of 5").
  • Customizability: The text for the buttons and label can be customized via the keyword prop, making this component flexible for different contexts.

Example Usage

<DifferenceNavigation
  differenceId={2}
  setDifferenceFocus={handleFocusChange}
  totalDifferences={5}
  keyword="page"
  plural="pages"
/>

In this example:

  • The navigation is for "pages" instead of the default "variations".
  • The current page is 2, and there are 5 pages total.
  • The buttons will call handleFocusChange to update the current page, and the label will display "Page 2 of 5".

Conditional Rendering

  • If there are no items to display (i.e., totalDifferences === 0), the component renders a message indicating that no items were found.

Custom Button Rendering

  • The buttons are rendered using a helper method renderButton, which accepts an id, onClick function, disabled state, and content to allow for consistent button rendering and styling.