useFocus.md

🔦useFocus

Manages detection of focus. Requires spreading the second param bind over the targeted field to function.

Returns

• isFocus {boolean}: Contains the state, just like the first element of useState. Only exclusivly boolean
• bind {object}: After spreading onto the targeted element, allows the useFocus functionality

Usage

// ---------- Logic ---------- \\

import { useFocus } from "bjork_react-hookup";
import Focus from "./Focus";

const FocusContainer = () => {
  const [isFocus, bind] = useFocus();

  return <Focus props={{ isFocus, bind }} />;
};

// ---------- Visual ---------- \\

const Focus = ({ props: { isFocus, bind } }) => (
  <>
    <p>{isFocus ? "😁" : "☹️"}</p>
    <input {...bind}></input>
  </>
);