Skip to content

from / fromEvent

Wrappers around RxJS's from() and fromEvent() to allow them to accept refs. Available in the @vueuse/rxjs add-on.

Usage

Category
Export Size
153 B
Package
@vueuse/rxjs
Last Changed
5 months ago
ts
import { ref } from 'vue'
import { from, fromEvent, toObserver, useSubscription } from '@vueuse/rxjs'
import { interval } from 'rxjs'
import { map, mapTo, takeUntil, withLatestFrom } from 'rxjs/operators'
const count = ref(0)
const button = ref<HTMLButtonElement>(null)
useSubscription(
  interval(1000)
    .pipe(
      mapTo(1),
      takeUntil(fromEvent(button, 'click')),
      withLatestFrom(
        from(count, {
          immediate: true,
          deep: false,
        }),
      ),
      map(([curr, total]) => curr + total),
    )
    .subscribe(toObserver(count)), // same as ).subscribe(val => (count.value = val))
)
js
import { ref } from 'vue'
import { from, fromEvent, toObserver, useSubscription } from '@vueuse/rxjs'
import { interval } from 'rxjs'
import { map, mapTo, takeUntil, withLatestFrom } from 'rxjs/operators'
const count = ref(0)
const button = ref(null)
useSubscription(
  interval(1000)
    .pipe(
      mapTo(1),
      takeUntil(fromEvent(button, 'click')),
      withLatestFrom(
        from(count, {
          immediate: true,
          deep: false,
        }),
      ),
      map(([curr, total]) => curr + total),
    )
    .subscribe(toObserver(count)),
)

Type Declarations

typescript
export declare function from<T>(
  value: ObservableInput<T> | Ref<T>,
  watchOptions?: WatchOptions,
): Observable<T>
export declare function fromEvent<T extends HTMLElement>(
  value: MaybeRef<T>,
  event: string,
): Observable<Event>

Source

SourceDocs

Contributors

Anthony Fu
Ben Lesh
Amorites
rorry121
Curt Grimes
Alexander Karelas
DesselBane
yang
Michel Betancourt

Changelog

v10.2.1 on 6/28/2023
fa7ed - fix(fromEvent): torn down properly (#3155)
v9.3.1 on 10/17/2022
554a3 - feat(fromEvent): support HTMLElement (#2048)

Released under the MIT License.