@pionjs/pion/lib/use-ref.js

Hooks for web components

import { useMemo } from "./use-memo";
/**
 * Creates a new Ref object compatible with both React-style `.current`
 * and lit-html-style `.value` property access.
 *
 * @function
 * @template T
 * @param   {T} [initialValue]
 * @return  {Ref<T>}
 */
export function createRef(initialValue) {
    let _value = initialValue;
    return {
        get current() {
            return _value;
        },
        set current(v) {
            _value = v;
        },
        get value() {
            return _value;
        },
        set value(v) {
            _value = v;
        },
    };
}
/**
 * Returns a memoized Ref object that persists across renders.
 * The ref object is compatible with both React-style `.current`
 * and lit-html-style `.value` property access, making it usable
 * with lit-html's `ref` directive.
 *
 * @function
 * @template T
 * @param   {T} [initialValue]
 * @return  {Ref<T>} Ref object with both `current` and `value` properties
 */
export function useRef(initialValue) {
    return useMemo(() => createRef(initialValue), []);
}