Inspired by focus-lock

motivation

Recently I create web-ext contain lots of input elements(or other focusable element). I want to automatic focus available element inside opened dialog/popover/modal. And when I close those elements, focus another element inside page.

This package for:

1. switch focus between different elements functionally;
2. automatic focus element if available;

install

pnpm i focus-if-need

usage

react

import { useFocus } from 'focus-if-need/react'

const { ref } = useFocus<HTMLInputElement>('main')
<input ref={ref} placeholder="placeholder" />

functional focus any element:

import { useFocus, focusIfNeed } from 'focus-if-need/react'

// focus input element which register by id='main'
const { history } = focusIfNeed
history.focus('main')

Or focus last focused element

import { useFocus, focusIfNeed } from 'focus-if-need/react'

const { history } = focusIfNeed
history.go(-1)

manually

import { createFocusIfNeed } from 'focus-if-need'

const focusIfNeed = createFocusIfNeed()
// focus element
focusIfNeed.focus(id, elementRef)

development

• Setup - pnpm i
• Build - pnpm build

built with ❤️ by 😼