ref

Reference

ref={Signal}

When the ref attribute is used on an HTML element, you can access the current value of that ref through the ref.value property.

export default ({}, { onMount, cleanup, state }: WebContext) => {
  const ref = state(null);

  function onClick(e) {
    console.log("Event via ref", e);
  }

  onMount(() => ref.value.addEventListener("click", onClick));
  cleanup(() => ref.value.removeEventListener("click", onClick));

  return <div ref={ref}>Example</div>;
};

If you run it on an effect, keep in mind that they run before it has been mounted and you will not yet have access to the element.

If you need multi-refs for an array, you can do it this way:

export default (
  { items = [] }: Props,
  { effect, state, derived }: WebContext,
) => {
  // Every time the "items" property change,
  // the "derived" updates the refs
  const refs = derived(() =>
    Array.from({ length: items.length }).map(() => state(null)),
  );

  effect(() => {
    refs.value.forEach((ref, i) => {
      if (ref.value) {
        ref.value.innerHTML = `Updated ${i}`;
      }
    });
  });

  return (
    <>
      {items.map((item, i) => (
        <div ref={refs.value[i]}>{item}</div>
      ))}
    </>
  );
};

Signals in Brisa, like state(), derived(), and effect() can be used without the rules of hooks. You can use them in any order and in any place in your component. This is why you can use state() inside a derived() function.

Support