rx-use's Introduction

rx-use

Sensor and side-effect library for rxjs. Do you want to contribute? See, help wanted.

Observables

location$ — browser location and history sensor.
- pathname$ — browser location pathname sensor.
network$ — returns consolidate network status info.
- onLine$ — boolean whether user is on-line.
- connection$ — information about user's network connection.
windowSize$ and windowSizeRaf$ — browser window dimension sensor.
darkTheme$ — emits true if UI should use dark theme.
matchMedia$() — returns boolean indicating media query match.
- colorSchemeDark$ — whether user selected dark theme in system settings.
- colorSchemeLight$ — whether user selected light theme in system settings.
- colorSchemeNoPreference$ — whether user has no preference for color scheme.
stdin$ — listen for data coming from STDIN.
ansiKeys$ — listen for ANSI terminal key presses.
pubsub — publish/subscribe mechanism for inter-tab communication in browser.
tablist — keeps track of all same origin tabs, elects leader and allows to send messages to all tabs or create private channels between any two tabs.

Operators

raf() — de-bounces events using window.requestAnimationFrame.

Other

fromStream() — constructs observable from Node.js readable stream.

Most observables imported from this library have ReadonlyBehaviorSubject type. Which is an Observable with an extra .getValue() to access the current value of the observable.

type ReadonlyBehaviorSubject<T> = Observable<T> & Pick<BehaviorSubject<T>, 'getValue'>;

License

Unlicense — public domain.

rx-use's People

Contributors

Stargazers

Watchers

rx-use's Issues

Ambient Light

Use Ambient Light Events API to create:

ambientLigth$ observable.
Make use of ambientLight$ observable in darkMode$ observable to switch between modes depending on ambient light value.

Hotkeys

Utilities for easy creation of browser keyboard shortcuts. Useful links:

Media query

Add observable that emits on media query state changes.

Gyroscope

Use web Gyroscope API to create gyroscope$() observable.

gyroscope$({frequency: 60}).subscribe(() => {});

breakpoints$

Observable which given a user screen breakpoint spec, emits the name of current. screen size.

Light / dark theme

Use media query API to detect if user has selected light or dark mode.

darkTheme$
lightTheme$
colorScheme$

Tab leader election

Use pubsub functionality to build leader election on top of that.

Battery API

Use Battery API to create battery$ observable.

Moving average

Add operator that tracks moving average value over n last values.

Typing start

Observable that fires when user starts typing in the browser, but no input field is selected. Analogous to useStartTyping hook.

User activity

Observable that tracks if user is "active" on site.
Observable that fires when user starts typing.
Observable that listens for onbeforeunload event to fire when user tries to leave the page.

React hook that returns unmount notifier observable

Create React hook which returns and indicator observable which signals when component was unmounted.

const MyComponent = () => {
  const unmounted$ = useUnmounted();

  useEffect(() => {
    something$.pipe(
      takeUntil(unmounted$)
    );
  }, []);
};

Whether user has low-end experience

Implement isLowEndExperience$ observable, same as here, but it should be an observable listening for network changes instead.
prefers-reduced-motion media uqery.

Recommend Projects