Reactive Hooks

Reactive Hooks provides a set of tools for work with Reactive Extensions in React using hooks

** This project is in a very early stage, feel free to contribute 😉

Click here to check an online working SAMPLE

Installation

Nothing new here, just npm install

npm i reactivehooks

Get Started

The code below is a sample that shows how to write a type ahead search using Reactive Hooks and RxJs:

• for a more complete example check the sample project or check this working online sample

// api fetch that returns an observable
const searchStarWarsPeople = (name: string) =>
      fetchJson<StarWarApiPeopleResult>(`https://swapi.co/api/people/?format=json&search=${name}`)

// create an input text that has obsevable properties
const SearchText = rxInput("text")
const loader = createLoaderControl() // loader control

// Rx operator pipeline for type ahead search
const typeAheadSearch$ =
  SearchText.onValueChanges$.pipe(
    filter(x => x.length >= 2),
    debounceTime(300),
    distinctUntilChanged(),
    loader.start(),
    switchMap(searchStarWarsPeople),
    retry(3),
    map(x => x.results),
    loader.stop(),
  )

const App = () => {
  // use observables
  const starWarsPeople = useObservable(typeAheadSearch$, [])
  const isLoading = useObservable(loader.status$, false)
  
  return (
    <div>
      <header>
        <SearchText  />
        {isLoading && <span>loading...</span>}
        <ul>
          {starWarsPeople.map((x, i) =>
            <li key={i}>
              <div>{x.name}</div>
            </li>
          )}
        </ul>
      </header>
    </div>
  )
}

Documentation

useSubscribe

A hook that provides a way to just subscribe to an observable

Signature:

 function useSubscribe<T>(
   observable: Observable<T>, 
   next?: ((value: T) => void), 
   error?: ((error: any) => void), 
   complete?: ((done: boolean) => void)
 ): void

useObservable

A hook that subscribes to an observable and returns the emited value as a state for your component

Signature:

function useObservable<T>(
    observable: Observable<T>, 
    initialValue: T
): T

useObservableWithError

A hook that subscribes to an observable and returns the emited value, error or complete as a state for your component

Signature:

function useObservableWithError<T>(
    observable: Observable<T>, 
    initialValue: T
): [T, any, boolean]

useRxInputValue

A hook that subscribes to an observable of changes of a RxInput, returning the value and a function to change the input value

Signature:

function useRxInputValue(
  rxInput: RxInput, 
  initialValue: string
) => [string, (value: string) => void]

rxInput

Creates a html input of given type, the control have observable properties for control changes

Signature:

function rxInput(type: string): RxInput

Properties

| Property | Event | Notes | |-----------------|----------|----------------------------------------------------------------------| | onChange$ | onChange | | | onFocus$ | onFocus | | | onBlur$ | onBlur | | | onValueChanges$ | onChange | Emit just the value of the control without the complete event object |

rxButton

Creates a html button, the control have observable properties for control changes

Signature:

function rxButton(): RxButton

Properties

| Property | Event | Notes | |-----------------|----------|----------------------------------------------------------------------| | onClick$ | onClick | |

createLoaderControl

Creates a helper object with RxJs operators for start and stop a loader observable

Signature:

function createLoaderControl(): {
    start(): function<T>(x: Observable<T>): Observable<T>;
    stop(): function<T>(x: Observable<T>): Observable<T>;
    status$: Observable<boolean>
}

fetchJson

Is just the fromFetch from rxjs/fetch, but auto map to json()

Signature:

function fetchJson<T>(
  url: string | Request, 
  init?: RequestInit
): Observable<T>