Sensors

useOnStartTyping

Fires a callback when the user starts typing on non-editable elements. Useful for implementing search-on-type or keyboard shortcut activation.

Fires a callback when the user begins typing a character key while no editable element (input, textarea, or contenteditable) is focused. Useful for search-on-type UX or keyboard shortcut activation.

import { 
function useOnStartTyping(callback: (event: KeyboardEvent) => void): void
useOnStartTyping } from "@usels/web";
import { 
function useRef<T>(initialValue: T): RefObject<T> (+2 overloads)
useRef returns a mutable ref object whose .current property is initialized to the passed argument
(initialValue). The returned object will persist for the full lifetime of the component.
Note that useRef() is useful for more than the ref attribute. It’s handy for keeping any mutable
value around similar to how you’d use instance fields in classes.
@version ― 16.8.0
@see ― https://react.dev/reference/react/useRef
useRef } from "react";

function 
function SearchOnType(): JSX.Element
SearchOnType() {
  const 
const inputRef: RefObject<HTMLInputElement | null>
inputRef = 
useRef<HTMLInputElement>(initialValue: HTMLInputElement | null): RefObject<HTMLInputElement | null> (+2 overloads)
useRef returns a mutable ref object whose .current property is initialized to the passed argument
(initialValue). The returned object will persist for the full lifetime of the component.
Note that useRef() is useful for more than the ref attribute. It’s handy for keeping any mutable
value around similar to how you’d use instance fields in classes.
@version ― 16.8.0
@see ― https://react.dev/reference/react/useRef
useRef<
interface HTMLInputElement
HTMLInputElement>(null);

  
function useOnStartTyping(callback: (event: KeyboardEvent) => void): void
useOnStartTyping((
event: KeyboardEvent
event) => {
    
const inputRef: RefObject<HTMLInputElement | null>
inputRef.
RefObject<HTMLInputElement | null>.current: HTMLInputElement | null
The current value of the ref.
current?.
any
focus();
  });

  return <
JSX.IntrinsicElements.input: DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>
input 
RefAttributes<HTMLInputElement>.ref?: Ref<HTMLInputElement> | undefined
Allows getting a ref to the component instance.
Once the component unmounts, React will set ref.current to null
(or call the ref with null if you passed a callback ref).
@see ― https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs
ref={
const inputRef: RefObject<HTMLInputElement | null>
inputRef} 
InputHTMLAttributes<HTMLInputElement>.placeholder?: string | undefined
placeholder="Start typing anywhere..." />;
}

import { createRef$, observable } from "@usels/core";
import { createOnStartTyping } from "@usels/web";

function SearchOnType() {
  "use scope"
  const inputRef = createRef$<HTMLInputElement>();

  createOnStartTyping((event) => {
    inputRef.current?.focus();
  });

  return <input ref={inputRef} placeholder="Start typing anywhere..." />;
}

Type

Parameters

Parameter	Type	Description
`callback`	`(event: KeyboardEvent) => void`	-

Returns

void

Source

View on GitHub