MENU


useFocus

If you just want to focus on an element when it mounts:


<input type="text" autoFocus />

To control focus dynamically:


RESETRUNFULL
<!DOCTYPE html><html><head>
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head><body>
<div></div>
<script type="text/babel">
const { useRef } = React;
const FocusDemo = () => {
  const [inputRef, setInputFocus] = useFocus()
  return (
    <React.Fragment>
      <button onClick={setInputFocus} >
        Focus
      </button>
      <input ref={inputRef} />
    </React.Fragment>
  )}
const useFocus = () => {
  const htmlElRef = useRef(null)
  const setFocus = () => {htmlElRef.current &&
    htmlElRef.current.focus()}
  return [ htmlElRef, setFocus ] }
const root = ReactDOM.createRoot(document.querySelector("div"));
root.render(<FocusDemo/>);
</script>
</body></html>