@lixquid/util-react@0.4.0Built and signed on GitHub ActionsBuilt and signed on GitHub Actions
Built and signed on GitHub Actions
Utility functions and hooks for a variety of React-style frameworks.
This package works with Node.js, Deno, BrowsersIt is unknown whether this package works with Cloudflare Workers, Bun
JSR Score
100%
Published
4 months ago (0.4.0)
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990import type { EventLike, HTMLInputLike } from "./_internal/types.d.ts"; /** * Returns an event handler that will call the callback with the value of the * target element. This is mainly used for `input` `onChange` events. * @example * ```tsx * const [value, setValue] = useState(""); * return <input value={value} onChange={setString(setValue)} />; * ``` */ export function setString( callback: (value: string) => void, ): (e: EventLike) => void { return (e) => callback((e.target as HTMLInputLike).value); } const setterDontSet = Symbol("setterDontSet"); /** * Returns an event handler that will call the callback with the value of the * target element as a float. If the value is not a valid float, the callback * will not be called, unless `orElse` is provided, in which case the callback * will be called with that value. * @param callback The setter function to be called. * @param orElse If set, this value will be passed to the callback if the input * is not a valid float. * @example * ```tsx * const [value, setValue] = useState(0); * return <input type="number" value={value} onChange={setFloat(setValue)} />; * // If the input is not a valid float, `setValue` will not be called. * ``` * @example * ```tsx * const [value, setValue] = useState<number | null>(0); * return <input type="number" value={value ?? ""} onChange={setFloat(setValue, null)} />; * // If the input is not a valid float, `setValue` will be called with `null`. */ export function setFloat<T>( callback: (value: T | number) => void, orElse: T | typeof setterDontSet = setterDontSet, ): (e: EventLike) => void { return (e) => { const v = Number.parseFloat((e.target as HTMLInputLike).value); if (Number.isNaN(v)) { if (orElse !== setterDontSet) { callback(orElse); } } else { callback(v); } }; } /** * Returns an event handler that will call the callback with the value of the * target element as a integer. If the value is not a valid integer, the * callback will not be called, unless `orElse` is provided, in which case the * callback will be called with that value. * @param callback The setter function to be called. * @param orElse If set, this value will be passed to the callback if the input * is not a valid integer. * @example * ```tsx * const [value, setValue] = useState(0); * return <input type="number" value={value} onChange={setinteger(setValue)} />; * // If the input is not a valid integer, `setValue` will not be called. * ``` * @example * ```tsx * const [value, setValue] = useState<number | null>(0); * return <input type="number" value={value ?? ""} onChange={setinteger(setValue, null)} />; * // If the input is not a valid integer, `setValue` will be called with `null`. */ export function setInteger<T>( callback: (value: T | number) => void, orElse: T | typeof setterDontSet = setterDontSet, ): (e: EventLike) => void { return (e) => { const v = Number.parseInt((e.target as HTMLInputLike).value); if (Number.isNaN(v)) { if (orElse !== setterDontSet) { callback(orElse); } } else { callback(v); } }; }