rxjs-web-observers
Version:
69 lines (48 loc) • 2.33 kB
Markdown
# rxjs-web-observers
[](https://www.npmjs.com/package/rxjs-web-observers)
[](https://bundlephobia.com/result?p=rxjs-web-observers)
[](https://travis-ci.com/olegmingaleev/rxjs-web-observers)
[](https://camo.githubusercontent.com/f86cfa12fec6e29e7025d436861a09c09d6dffee/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f6c2f7061636b6167652d6275696c642d73746174732e737667)
This library allows you to use MutationObserver, IntersectionObserver, ResizeObserver like RxJs observer.
## Install
```
npm install --save rxjs-web-observers
```
## Polyfills
Recommended polyfills:
- [MutationObserver](https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs)
- [IntersectionObserver](https://github.com/w3c/IntersectionObserver/tree/master/polyfill)
- [ResizeObserver polyfill based on latest specification which includes support for observer options](https://github.com/juggle/resize-observer) (recommended)
- [ResizeObserver polyfill based on initial specification](https://github.com/juggle/resize-observer)
## Usage
Creating `MutationObserver` from call `fromMutation` function:
```typescript
import { fromMutation } from 'rxjs-web-observers';
const source$ = fromMutation(
observedEl, // some observed element
{ childList: true } // observer options
);
source$.subscribe(mutations => {
// your code...
});
```
Creation `IntersectionObserver` by `fromIntersection` function:
```typescript
import { fromIntersection } from 'rxjs-web-observers';
const source$ = fromIntersection(
observedEl, // some observed element
);
source$.subscribe(entries => {
// your code...
});
```
Creation `ResizeObserver` by `fromResize` function:
```typescript
import { fromResize } from 'rxjs-web-observers';
const source$ = fromResize(
observedEl, // some observed element
);
source$.subscribe(entries => {
// your code...
});
```