@qyu/signal-react

@qyu/signal-core

Utility react hooks for @qyu/signal-core

List of hooks

useSignalValue

Creates OSignal, updates it's value after render

const App = () => {
    const param = 10
    const root = useSignalValue(
        0,
        // dependencies, optional
        [10]
    )
}

useSignalOutput

Extracts Signal output value to state, rerender when it updates

const App = () => {
    const root_output = useSignalOutput(root)
}

useSignalConnect

Same as useSignalOutput, but does not initialise value immediately and instead waits for effect. Prevents unnecesary updates for memorized signals

const App = () => {
    const root_connection = useSignalConnect(root)

    if (root_connection.active) {
        // prints root output
        console.log("active", root_connection.value)
    } else {
        // prints null
        console.log("active", root_connection.value)
    }
}

useSignalEventDeps

Will fire event on deps change

const App = () => {
    // config is optional
    // will schedule all updates to a microtask to properly batch them
    // if instant: true - will emit immediately
    const esignal_deps = useSignalEventDeps([1, ""], { instant: false })
}

useSignalEffect

Will attach listener to target

const App = () => {
    const root = useSignalValue(0)

    useSignalEffect({
        target: root,
        listener: target => console.log(target.output()),

        config: {
            // emit on initial effect
            emit: true
        }
    })
}

useDOMStyle

const App = (props) => {
    const root = useSignalValue(0)
    const ref = useRef<HTMLElement | null>()

    // will update left when root updates
    useDOMStyle(() => ref.current, "left", osignal_new_pipe(root, v => `${v}px`))

    // will update left and background
    useDOMStyles(
        () => ref.current,
        osignal_new_mergemap({
            backgroundColor: props.background,
            left: osignal_new_pipe(root, v => `${v}px`)
        })
    )
}

useDOMAttribute

const App = (props) => {
    const root = useSignalValue(0)
    const ref = useRef<HTMLElement | null>()

    // will update data-left when root updates
    useDOMAttribute(() => ref.current, "data-left", osignal_new_pipe(root, v => `${v}px`))

    // will update data-left and data-background
    useDOMAttributes(
        () => ref.current,
        osignal_new_mergemap({
            "data-background": props.background,
            "data-left": osignal_new_pipe(root, v => `${v}px`)
        })
    )
}