Abandoned library?

[luchillo17]

The last npm release was 2 years ago: https://www.npmjs.com/package/@uidotdev/usehooks?activeTab=versions
The last release here in GitHub was in October 2023: https://github.com/uidotdev/usehooks/releases
The last non web page related PR was also around 2023:

• https://github.com/uidotdev/usehooks/pulls?q=is%3Apr+is%3Amerged+sort%3Acreated-desc
• Export type declaration for useSessionStorage #235

Afaik this library is meant to be a learning library showing how the hooks are implemented, but it seems to be abandoned, the very few updates still being merged are around the course website.

If development of this library is not going to be continued I would suggest adding a disclaimer it's for education purposes, and point to an alternative like react-use or usehooks-ts:

• https://www.npmjs.com/package/react-use
• https://www.npmjs.com/package/usehooks-ts

[vinizinmoraes]

I reached the same conclusion when examining why useMediaQuery didn't have a default value for SSR rendering.

[luchillo17]

I looked into the hook libraries I could find and to a lesser degree the other 2 I mentioned have not received an update in 7~9 months despite having 100s of issues and PRs open, seems we can only take these libraries as inspiration at this point.

[hadnet]

Hey, @tylermcginnis, show some love for this library, bro. I even came here to suggest adding the useTextSelection hook, but instead I found it kinda abandoned. Kinda bummed out ’cause this library is actually pretty cool.

import { useCallback, useLayoutEffect, useState } from 'react'

type ClientRect = Record<keyof Omit<DOMRect, "toJSON">, number>

function roundValues(_rect: ClientRect) {
  const rect = {
    ..._rect
  }
  for (const key of Object.keys(rect)) {
    // @ts-ignore
    rect[key] = Math.round(rect[key])
  }
  return rect
}

function shallowDiff(prev: any, next: any) {
  if (prev != null && next != null) {
    for (const key of Object.keys(next)) {
      if (prev[key] != next[key]) {
        return true
      }
    }
  } else if (prev != next) {
    return true
  }
  return false
}

type TextSelectionState = {
  clientRect?: ClientRect,
  isCollapsed?: boolean,
  textContent?: string
}

const defaultState: TextSelectionState = {}

/**
 * useTextSelection(ref)
 * 
 * @description
 * hook to get information about the current text selection
 * 
 */
export function useTextSelection(target?: HTMLElement) {

  const [{
    clientRect,
    isCollapsed,
    textContent,
  }, setState] = useState<TextSelectionState>(defaultState)

  const reset = useCallback(() => {
    setState(defaultState)
  }, [])

  const handler = useCallback(() => {
    let newRect: ClientRect
    const selection = window.getSelection()
    let newState: TextSelectionState = { }

    if (selection == null || !selection.rangeCount) {
      setState(newState)
      return
    } 

    const range = selection.getRangeAt(0)

    if (target != null && !target.contains(range.commonAncestorContainer)) {
      setState(newState)
      return
    }

    if (range == null) {
      setState(newState)
      return
    }

    const contents = range.cloneContents()

    if (contents.textContent != null) {
      newState.textContent = contents.textContent
    }

    const rects = range.getClientRects()

    if (rects.length === 0 && range.commonAncestorContainer != null) {
      const el = range.commonAncestorContainer as HTMLElement
      newRect = roundValues(el.getBoundingClientRect().toJSON())
    } else {
      if (rects.length < 1) return
      newRect = roundValues(rects[0].toJSON())
    }
    if (shallowDiff(clientRect, newRect)) {
      newState.clientRect = newRect
    }
    newState.isCollapsed = range.collapsed

    setState(newState)
  }, [target])

  useLayoutEffect(() => {
    document.addEventListener('selectionchange', handler)
    document.addEventListener('keydown', handler)
    document.addEventListener('keyup', handler)
    window.addEventListener('resize', handler)

    return () => {
      document.removeEventListener('selectionchange', handler)
      document.removeEventListener('keydown', handler)
      document.removeEventListener('keyup', handler)
      window.removeEventListener('resize', handler)
    }
  }, [target])

  return {
    clientRect,
    isCollapsed,
    textContent
  }
}