useActiveElement

Hook that returns activeElement and listen its changes.

Demo

INFO

The component has 3 HTML elements: a span element with tabindex attribute, a p element with tabindex attribute and a button element. It renders also the current active element. If element focused changes, active element displayed will change.

Loading demo…

Show source code

import { useActiveElement } from "../../../..";
export const UseActiveElement = () => {
	const activeElement = useActiveElement();

	return (<>
		<p>Active element is: {activeElement?.tagName}</p>
		<div style={{ display: "grid", gridTemplateColumns: "auto auto auto", justifyContent: "center", gap: 50 }}>
			<span tabIndex={0} style={{backgroundColor: '#1A1A1A', borderRadius: 8, cursor: "pointer", padding: "15px 25px", margin: 'auto'}}>Span</span>
			<p tabIndex={0} style={{backgroundColor: '#1A1A1A', borderRadius: 8, cursor: "pointer", padding: "15px 25px", margin: 0}}>P</p>
			<button>Button</button>
		</div>
	</>)
}