How do you use useRef with this library?

[tansanDOTeth]

This is a common example of useRef with Rxjs.

const InputBox = () => {
  const buttonEl = React.useRef(null);

  useEffect(() => {
    const clicky = fromEvent(buttonEl.current, 'click').subscribe(clickety =>
      console.log({ clickety })
    );

    return () => clicky.unsubscribe();
  }, []);

  return (
    <button ref={buttonEl} type="button">
      Click Me
    </button>
  );
};

It seems you can't access the reference in the following because it is null until the DOM is ready:

const clicky = useObservable(() => fromEvent(buttonEl.current, 'click').subscribe(clickety =>
  console.log({ clickety })
))

[crimx]

If you need a click event stream, there is an example from the docs:

import { useObservableCallback, useSubscription } from 'observable-hooks'

const Comp = () => {
  const [onChange, textChange$] = useObservableCallback<
    string,
    React.FormEvent<HTMLInputElement>
  >(event$ => event$.pipe(
    pluck('currentTarget', 'value')
  )) // or just use "pluckCurrentTargetValue" helper

  useSubscription(textChange$, console.log)

  return <input type="text" onChange={onChange} />
}

If you need a dom stream:

import React, { useRef } from 'react';
import { switchMap, fromEvent, Observable } from 'rxjs';
import { useObservable, useSubscription } from 'observable-hooks'

export function App() {
  const elRef = useRef()
  const el$ = useObservable(() => new Observable(sub => sub.next(elRef.current)));
  const clicky$ = useObservable(() => el$.pipe(
    switchMap(el => fromEvent(el, "click"))
  ));
  useSubscription(clicky$, console.log);
  return (
    <div className='App' ref={elRef}></div>
  );
}

Maybe I should add a useObservableRef for this.

[crimx]

Maybe I should add a useObservableRef for this.

Added.

[tansanDOTeth]

This is awesome! Thank you so much!