React hooks

This is a collection of hooks that I made for fun.

Installation

npm install @momentiris/hooks

Available Hooks

• useDynamicHeight
• useInputFocus

---

useDynamicHeight

Takes a ref and uses useState and returns the scrollHeight of given element. I wanted to make this for dropdown functionality with a dynamic height value of the element being toggled.

useDynamicHeight(nodeRef: React.RefObject<any>): number

Example

import React from 'react'
import { useDynamicHeight } from '@momentiris/hooks'

export const Component = () => {
  const nodeRef = React.useRef(null)
  const height = useDynamicHeight(nodeRef)

  console.log(height) // 500
  return <div ref={nodeRef} style={{ height: 500 }} />
}

useInputFocus

Auto focuses an input element.

useInputFocus(): React.RefObject<HTMLInputElement>

Example

import React from 'react'
import { useInputFocus } from '@momentiris/hooks'

export const Input = () => {
  const nodeRef = useInputFocus()

  return <input ref={nodeRef}> />
}