Merge pull request #9 from commitd/sh-useHover

✨ Adding useHover hook

Author: stuarthendren

src/hooks/index.ts

@@ -1,5 +1,6 @@
 export * from './useDebounce'
 export * from './useEventListener'
+export * from './useHover'
 export * from './useInterval'
 export * from './useLocalState'
 export * from './usePoll'

src/hooks/useHover/index.ts

@@ -0,0 +1 @@
+export * from './useHover'

src/hooks/useHover/useHover.stories.tsx

@@ -0,0 +1,41 @@
+import React, { RefObject } from 'react'
+import { Story, Meta } from '@storybook/react'
+import { Box } from '@committed/components'
+import { useHover } from '.'
+
+export interface UseHoverDocsProps<T extends HTMLElement> {
+  /** element reference to track hover on */
+  element?: RefObject<T>
+}
+
+/**
+ * useHover tracks the hovered state of the given element.
+ *
+ * @param element reference for the element to add the listener too
+ */
+export const UseHoverDocs: React.FC<UseHoverDocsProps<HTMLElement>> = () => null
+
+export default {
+  title: 'Hooks/useHover',
+  component: UseHoverDocs,
+  excludeStories: ['UseHoverDocs'],
+  argTypes: {
+    element: { control: { type: 'none' } },
+  },
+} as Meta
+
+const Template: Story<UseHoverDocsProps<HTMLDivElement>> = () => {
+  const divRef = React.useRef<HTMLDivElement>(null)
+  const [isHovered] = useHover(divRef)
+  return (
+    <Box
+      m={3}
+      p={3}
+      ref={divRef}
+      bgcolor={isHovered ? 'primary.main' : 'secondary.main'}
+      color={isHovered ? 'primary.contrastText' : 'secondary.contrastText'}
+    >{`This is ${isHovered ? `hovered` : `unhovered`}`}</Box>
+  )
+}
+
+export const Default = Template.bind({})

src/hooks/useHover/useHover.test.ts

@@ -0,0 +1,74 @@
+import { renderHook, act } from '@testing-library/react-hooks'
+import { useHover } from '.'
+import { RefObject } from 'react'
+
+let listeners: Record<string, () => void>
+let ref: RefObject<HTMLDivElement>
+
+beforeEach(() => {
+  listeners = {}
+
+  const current = ({
+    addEventListener: jest.fn((event: string, handler: () => void) => {
+      listeners[event] = handler
+    }),
+    removeEventListener: jest.fn((event: string) => {
+      delete listeners[event]
+    }),
+  } as unknown) as HTMLDivElement
+
+  ref = {
+    current,
+  } as RefObject<HTMLDivElement>
+})
+
+test('Should start with hover false', () => {
+  const { result } = renderHook(() => useHover(ref))
+  expect(result.current[0]).toEqual(false)
+})
+
+test('Should be true if mouseover', () => {
+  const { result } = renderHook(() => useHover(ref))
+  act(() => {
+    const event = ({} as unknown) as Event
+    ;(listeners.mouseover as EventListener)(event)
+  })
+  expect(result.current[0]).toEqual(true)
+})
+
+test('Should be false if mouseout', () => {
+  const { result } = renderHook(() => useHover(ref))
+
+  act(() => {
+    const event = ({} as unknown) as Event
+    ;(listeners.mouseout as EventListener)(event)
+  })
+
+  expect(result.current[0]).toEqual(false)
+})
+
+test('Should be toggle if mouseover then mouseout', () => {
+  const { result } = renderHook(() => useHover(ref))
+
+  act(() => {
+    const event = ({} as unknown) as Event
+    ;(listeners.mouseover as EventListener)(event)
+  })
+  expect(result.current[0]).toEqual(true)
+
+  act(() => {
+    const event = ({} as unknown) as Event
+    ;(listeners.mouseout as EventListener)(event)
+  })
+
+  expect(result.current[0]).toEqual(false)
+})
+
+test('Should remove listeners', () => {
+  const { unmount } = renderHook(() => useHover(ref))
+
+  unmount()
+
+  expect(listeners.mouseover).toBeFalsy()
+  expect(listeners.mouseout).toBeFalsy()
+})

src/hooks/useHover/useHover.ts

@@ -0,0 +1,21 @@
+import { useState, RefObject } from 'react'
+import { useEventListener } from '../useEventListener/useEventListener'
+
+/**
+ * useHover tracks the hovered state of the given element.
+ *
+ * @param element reference to track hover on
+ */
+export function useHover<T extends HTMLElement = HTMLDivElement>(
+  element: RefObject<T>
+): [boolean] {
+  const [hovered, setHovered] = useState(false)
+
+  const handleMouseOver = () => setHovered(true)
+  const handleMouseOut = () => setHovered(false)
+
+  useEventListener('mouseover', handleMouseOver, element)
+  useEventListener('mouseout', handleMouseOut, element)
+
+  return [hovered]
+}