observable-hooks
    TypeScript icon, indicating that this package has built-in type declarations

    4.1.0 • Public • Published

    observable-hooks

    npm-version npm bundle size Build Status Coverage Status

    Commitizen friendly Conventional Commits JavaScript Style Guide code style: prettier

    logo

    React hooks for RxJS Observables. Simple, flexible, testable and performant.

    • Seamless integration of React and RxJS.
      • Props and states to Observables.
      • Observables to states and props events.
      • Conditional rendering with stream of React Components.
      • Render-as-You-Fetch with React Suspense.
      • No tap hack needed. With Epic-like signature Observable operation is pure and testable.
    • Full-powered RxJS. Do whatever you want with Observables. No limitation nor compromise.
    • Fully tested. We believe in stability first. This project will always maintain a 100% coverage.
    • Tiny and fast. A lot of efforts had been put into improving integration. This library should have zero visible impact on performance.
    • Compatible with RxJS 6 & 7.

    Why?

    React added hooks for reusing stateful logic.

    Observable is a powerful way to encapsulate both sync and async logic.

    Testing Observables is also way easier than testing other async implementations.

    With observable-hooks we can create rich reusable Components with ease.

    What It Is Not

    This library is not for replacing state management tools like Redux but to reduce the need of dumping everything into global state.

    Using this library does not mean you have to turn everything observable which is not encouraged. It plays well side by side with other hooks. Use it only on places where it's needed.

    At First Glance

    import * as React from 'react'
    import { useObservableState } from 'observable-hooks'
    import { timer } from 'rxjs'
    import { switchMap, mapTo, startWith } from 'rxjs/operators'
    
    const App = () => {
      const [isTyping, updateIsTyping] = useObservableState(
        transformTypingStatus,
        false
      )
    
      return (
        <div>
          <input type="text" onKeyDown={updateIsTyping} />
          <p>{isTyping ? 'Good you are typing.' : 'Why stop typing?'}</p>
        </div>
      )
    }
    
    // Logic is pure and can be tested like Epic in redux-observable
    function transformTypingStatus(event$) {
      return event$.pipe(
        switchMap(() =>
          timer(1000).pipe(
            mapTo(false),
            startWith(true)
          )
        )
      )
    }

    Installation

    yarn

    yarn add observable-hooks

    npm

    npm install --save observable-hooks

    Usage

    Read the docs at https://observable-hooks.js.org.

    Here is how I designed the API. Might give you a perspective on when use what.

    mindmap

    Examples are in here. Play on CodeSandbox:

    Note that there are also some useful utilities for common use cases to reduce garbage collection.

    Install

    npm i observable-hooks

    DownloadsWeekly Downloads

    9,929

    Version

    4.1.0

    License

    MIT

    Unpacked Size

    270 kB

    Total Files

    174

    Last publish

    Collaborators

    • straybugs