react-rxjs-tools v1.1.0
react-rxjs-tools
Tools to facilitate use of RxJS within React.js
Install
npm install --save react-rxjs-tools
What is this?
This is a collection of tools to help you use RxJS within React.
- useSubject: a hook to update your component when data arrives from a given Subject
- useBehaviorSubject: same as above but for BehaviorSubject only, using it's initial value.
- Subscription: a component that will update when data arrives from it's Subject
- BehaviorSubscription: same as above but for BehaviorSubject only, using it's initial value.
Using the useBehaviorSubject hook
Advantages:
- starts with the BehaviorSubject's current value
- you can use behaviorSubject$.getValue() in your component's code at render time
- you can subscribe to multiple streams
- you get a function to update the stream
- jsx is simpler
import React from 'react'
import {useBehaviorSubject} from 'react-rxjs-tools'
export default ({behaviorSubject$})=>{
const [val,setVal] = useBehaviorSubject(behaviorSubject$);
return (
<span>
{val}
</span>
);
}
Using the BehaviorSubscription component
Advantages:
- starts with the BehaviorSubject's current value
- you can use behaviorSubject$.getValue() in your component's code at render time
- you can use it from a class component
import React from 'react'
import {BehaviorSubscription} from 'react-rxjs-tools'
export default ({behaviorSubject$})=>
<BehaviorSubscription subject={behaviorSubject$}>
{(data)=>
<span>
{data}
</span>
}
</BehaviorSubscription>
Using the useSubject hook
Advantages
- you can set your own initial value until the next value arrives from the stream
- you can subscribe to multiple streams
- you get a function to update the stream
- jsx is simpler
import React, {useState} from 'react'
import {useSubject} from 'react-rxjs-tools'
export default ({subject})=>{
const [val,setVal] = useSubject("waiting for data",subject);
return (
<span>
{val}
</span>
);
}
Using the Subscription component
Advantages
- you can set your own initial value until the next value arrives from the stream
- you can use it from a class component
import React, {useState, useEffect} from 'react'
import {Subscription} from 'react-rxjs-tools'
export default ({subject})=>
<Subscription initial="waiting for data" subject={subject}>
{(data)=>
<span>
{data}
</span>
}
</Subscription>
Handling stream error
All methods allow for handling stream errors. If a stream your component is subscribed to sends an error, your component will throw an exception, so (while it's optional) it's recommended that you always register an error handler, like so:
useBehaviorSubject hook
const [val,setVal] = useBehaviorSubject(subject$,errorCallback);
BehaviorSubscription component
<BehaviorSubscription subject={subject$} onError={errorCallback}>
{...}
<BehaviorSubscription/>
In both cases, errorCallback should be a function that takes a single argument for the stream error.
Handling stream completion
When a stream completes, it's value cannot change anymore, so the UI can just ignore it. If you do want to respond to stream completion, you can send a completion handler, like so:
useBehaviorSubject hook
const [val,setVal] = useBehaviorSubject(subject$,errorCallback,completionCallback);
or if you omit the error handler:
const [val,setVal] = useBehaviorSubject(subject$,null,completionCallback);
BehaviorSubscription component
<BehaviorSubscription subject={subject$} onComplete={completionCallback}>
{...}
<BehaviorSubscription/>
In both cases, completionCallback should be a function that takes no arguments.
License
MIT © IndianaGeorge