Generically type ButtonProps

README.md

@@ -38,7 +38,7 @@ import useDropdownMenu from 'react-accessible-dropdown-menu-hook';
 Call the Hook, telling it how many items your menu will have:
 
 ```tsx
-const { buttonProps, itemProps, isOpen } = useDropdownMenu(numberOfItems);
+const { buttonProps, itemProps, isOpen } = useDropdownMenu<T>(numberOfItems);
 ```
 
 Spread the `buttonProps` onto a button:

src/use-dropdown-menu.test.tsx

@@ -11,7 +11,10 @@ interface Props {
 
 const TestComponent: React.FC<Props> = ({ options }) => {
 	const [itemCount, setItemCount] = useState(4);
-	const { buttonProps, itemProps, isOpen, setIsOpen, moveFocus } = useDropdownMenu(itemCount, options);
+	const { buttonProps, itemProps, isOpen, setIsOpen, moveFocus } = useDropdownMenu<HTMLButtonElement>(
+		itemCount,
+		options
+	);
 
 	const clickHandlers: (() => void)[] = [(): void => console.log('Item one clicked'), (): void => setIsOpen(false)];
 

src/use-dropdown-menu.ts

@@ -2,21 +2,21 @@
 import React, { useState, useRef, createRef, useEffect, useMemo } from 'react';
 
 // Create interface for button properties
-interface ButtonProps
+interface ButtonProps<T extends HTMLElement>
 	extends Pick<
-		React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>,
+		React.DetailedHTMLProps<React.ButtonHTMLAttributes<T>, T>,
 		'onKeyDown' | 'onClick' | 'tabIndex' | 'role' | 'aria-haspopup' | 'aria-expanded'
 	> {
-	ref: React.RefObject<HTMLButtonElement>;
+	ref: React.RefObject<T>;
 }
 
 // A custom Hook that abstracts away the listeners/controls for dropdown menus
 export interface DropdownMenuOptions {
 	disableFocusFirstItemOnClick?: boolean;
 }
 
-interface DropdownMenuResponse {
-	readonly buttonProps: ButtonProps;
+interface DropdownMenuResponse<T extends HTMLElement> {
+	readonly buttonProps: ButtonProps<T>;
 	readonly itemProps: {
 		onKeyDown: (e: React.KeyboardEvent<HTMLAnchorElement>) => void;
 		tabIndex: number;
@@ -28,15 +28,18 @@ interface DropdownMenuResponse {
 	readonly moveFocus: (itemIndex: number) => void;
 }
 
-export default function useDropdownMenu(itemCount: number, options?: DropdownMenuOptions): DropdownMenuResponse {
+export default function useDropdownMenu<T extends HTMLElement>(
+	itemCount: number,
+	options?: DropdownMenuOptions
+): DropdownMenuResponse<T> {
 	// Use state
 	const [isOpen, setIsOpen] = useState<boolean>(false);
 	const currentFocusIndex = useRef<number | null>(null);
 	const firstRun = useRef(true);
 	const clickedOpen = useRef(false);
 
 	// Create refs
-	const buttonRef = useRef<HTMLButtonElement>(null);
+	const buttonRef = useRef<T>(null);
 	const itemRefs = useMemo<React.RefObject<HTMLAnchorElement>[]>(
 		() => Array.from({ length: itemCount }, () => createRef<HTMLAnchorElement>()),
 		[itemCount]
@@ -216,7 +219,7 @@ export default function useDropdownMenu(itemCount: number, options?: DropdownMen
 	};
 
 	// Define spreadable props for button and items
-	const buttonProps: ButtonProps = {
+	const buttonProps: ButtonProps<T> = {
 		onKeyDown: buttonListener,
 		onClick: buttonListener,
 		tabIndex: 0,

test-projects/browser/src/app.tsx

@@ -8,7 +8,7 @@ import useDropdownMenu from 'react-accessible-dropdown-menu-hook';
 // Functional component
 const App: React.FC = () => {
 	// Use the Hook
-	const { buttonProps, itemProps, isOpen } = useDropdownMenu(3);
+	const { buttonProps, itemProps, isOpen } = useDropdownMenu<HTMLButtonElement>(3);
 
 	// Return JSX
 	return (

website/docs/getting-started/using.md

@@ -2,16 +2,18 @@
 title: Using
 ---
 
-To use the Hook, first call it, telling it how many items your menu will have:
+To use the Hook, first call it, telling it how many items your menu will have along with a valid HTMLElement subtype:
 
 ```jsx
-const { buttonProps, itemProps, isOpen } = useDropdownMenu(numberOfItems);
+const { buttonProps, itemProps, isOpen } = useDropdownMenu<HTMLSubtypeElement>(numberOfItems);
 ```
 
-Take the `buttonProps` object and spread it onto a button:
+Take the `buttonProps` object and spread it onto the corresponding HTML element to your subtype:
 
 ```jsx
 <button {...buttonProps}>Example</button>
+
+<div {...buttonProps}>Example</div>
 ```
 
 Create the menu with the `role='menu'` property and spread `itemProps[x]` onto each item: