Hook to use an RxJS Subject.
Returns the current value, a function to emit a new value, and any error.
A Subject is a special type of Observable that allows values to be multicasted to many Observers.
The type of the value emitted by the subject.
The type of the error that can be emitted by the subject. Defaults to unknown.
A tuple containing:
import { useSubject } from 'use-observable-hooks';
function EventEmitter() {
const [event, emitEvent] = useSubject<string>();
return (
<div>
<p>Last Event: {event}</p>
<button onClick={() => emitEvent('Click')}>Emit Click</button>
<button onClick={() => emitEvent('Hover')}>Emit Hover</button>
</div>
);
}
Hook to use an RxJS Subject with pipe operations.
The type of the value emitted by the subject after piping.
The type of the error that can be emitted by the subject. Defaults to unknown.
Operator functions to pipe to the subject.
A tuple containing:
import { useSubject } from 'use-observable-hooks';
import { debounceTime, map } from 'rxjs/operators';
function SearchInput() {
const [debouncedSearch, setSearch] = useSubject<string>(
debounceTime(300),
map((query) => query.toLowerCase())
);
return (
<div>
<input onChange={(e) => setSearch(e.target.value)} />
<p>Searching for: {debouncedSearch ?? 'Nothing yet'}</p>
</div>
);
}
Implementation of useSubject.