use-active-state

This package helps to get if an element is focused or not.

Installation

• with npm

npm i use-active-state

• with yarn

yarn add use-active-state

• with pnpm

pnpm add use-active-state

Usages:

/* Component.js */

import useActiveState from 'use-active-state'

const Component = () => {
  const [isActive, setIsActive, ref] = useActiveState()

  console.log(isActive)

  return (
    <button
      ref={ref}
      onClick={() => {
        setIsActive(true)
      }}
    >
      Click me
    </button>
  )
}

import { useRef } from 'react'
import useActiveState from 'use-active-state'

const Component = () => {
  const ref = useRef()
  const [isActive, setIsActive] = useActiveState(ref)

  console.log(isActive)

  return (
    <button
      ref={ref}
      onClick={() => {
        setIsActive(true)
      }}
    >
      Click me
    </button>
  )
}

import { useId } from 'react'
import useActiveState from 'use-active-state'

const Component = () => {
  const id = useId()
  const [isActive, setIsActive] = useActiveState(`[id="${id}"]`)

  console.log(isActive)

  return (
    <button
      id={id}
      onClick={() => {
        setIsActive(true)
      }}
    >
      Click me
    </button>
  )
}

Arguments of setIsActive() :

setIsActive() takes one argument (not required)

• true makes active state to true
• false makes active state to false
• else this will toggle active state

Made by Nazmus Sayad with ❤️.