ref attribute support

[ikabirov]

Is it planned? It will be very useful with useRef() hook implementation:

  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

It seems the best solution for that case

[yuretz]

You can easily do it without any additional attributes:

const {bind, wire} = hyperHTML;
const inputEl = wire()`<input type="text" />`;
const onButtonClick = () => {
  // `inputEl` is just an input element node :)
  inputEl.focus();
};

bind(document.body)`
  ${inputEl}
  <button onclick=${onButtonClick}>Focus the input</button>
  `;

[yuretz]

It seems to work with hooks too.

[joshgillies]

You don't really need ref in hyperHTML, namely because hyperHTML uses The Platform™️ you already have APIs for direct access to any element you like. As with @yuretz example, sure you can create a wire that contains the reference the the DOM node you're interested in, but alternatively you can also query the DOM directly with document.querySelector et al.

[ikabirov]

You can easily do it without any additional attributes:

I want do it without additional render function. It's allow to see all html in one place.

you can also query the DOM directly with document.querySelector et al.

Too much pain with refactoring. Id's should be unique in DOM, selectors and nesting are unstable and can be easily changed with redesign.

[yuretz]

Take a look at this. Isn't it exactly what you want? Edit: I've updated the demo to mimic the React hook API a bit closer :)

[ikabirov]

@yuretz Exactly! Thanks you

[yuretz]

Oh yeah, and it works with the useRef(), provided by neverland too, I've just haven't noticed it's already there, so I implemented my very own one, and there was no need for that. You are welcome!