recks
Search…
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:
1
import Recks from 'recks';
2
import { Subject } from 'rxjs';
3
4
function App() {
5
const ref$ = new Subject();
6
7
ref$.subscribe(ref => {
8
ref.style.background = 'magenta';
9
});
10
11
return <div ref={ref$}>Hello!</div>;
12
}
Copied!
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:
1
import Recks from 'recks';
2
import { Subject } from 'rxjs';
3
import { withLatestFrom, takeUntil } from 'rxjs/operators';
4
5
function TextInputWithFocusButton(props$, { destroy$ }) {
6
const ref$ = new Subject();
7
const clicks$ = new Subject();
8
9
clicks$
10
.pipe(
11
withLatestFrom(ref$, (_, ref) => ref),
12
takeUntil(destroy$)
13
)
14
.subscribe(ref => {
15
ref.focus();
16
});
17
18
return (
19
<div>
20
<input ref={ref$} type="text" />
21
<button onClick={ ()=>clicks$.next(null) }>
22
Focus the input
23
</button>
24
</div>
25
);
26
}
Copied!
Last modified 1yr ago
Copy link