DOM references

To interact with actual DOM Element — you need to acquire a reference to it. To get a reference, you can create a Subject and pass that subject to special ref property on JSX element:

import Recks from 'recks';
import { Subject } from 'rxjs';

function App() {
  const ref$ = new Subject();

  ref$.subscribe(ref => { = 'magenta';

  return <div ref={ref$}>Hello!</div>;

online sandbox

If DOM tree is updated ref$ will emit a reference to the new DOM element.

NOTE: ref$ will automatically complete with the component

Focus example

Here's a more sophisticated example with a Button, focusing Input on click:

import Recks from 'recks';
import { Subject } from 'rxjs';
import { withLatestFrom, takeUntil } from 'rxjs/operators';

function TextInputWithFocusButton(props$, { destroy$ }) {
  const ref$    = new Subject();
  const clicks$ = new Subject();

      withLatestFrom(ref$, (_, ref) => ref),
    .subscribe(ref => {

  return (
      <input  ref={ref$} type="text" />
      <button onClick={ ()=>clicks$.next(null) }>
        Focus the input

online sandbox

Last updated