https://github.com/jadbox/rxhooks
React Hook support for Observable Streams
https://github.com/jadbox/rxhooks
observables react reactjs rxjs
Last synced: about 1 year ago
JSON representation
React Hook support for Observable Streams
- Host: GitHub
- URL: https://github.com/jadbox/rxhooks
- Owner: jadbox
- Created: 2019-02-05T05:48:20.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-02-16T00:45:03.000Z (over 7 years ago)
- Last Synced: 2025-03-25T11:11:31.846Z (about 1 year ago)
- Topics: observables, react, reactjs, rxjs
- Language: HTML
- Homepage:
- Size: 772 KB
- Stars: 8
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Install
`npm install rxhooks`
### API
```typescript
function useRx(stream: (c: X) => Observable, initialValue: X, onErr?: ((error: any) => void) | undefined, onComplete?: (() => void) | undefined): [T]
useRx is a hook that takes an Observable factory function and returns [currentStreamOutput] for use in your component.
The stream will rerun anytime the initialValue is changed.
The onErr and onComplete parameters are callbacks to handle those stream states
```
```typescript
function useRxState(initialValue: X, pipes: OperatorFunction, onErr?: ((error: any) => void) | undefined, onComplete?: (() => void) | undefined): [T, (x: X) => void]
useRxState allows adding items to an Rx stream that is created for you.
The stream will rerun anytime the initialValue is changed.
The pipes parameter allows passing in Rx operators to work upon the internal source stream.
The onErr and onComplete parameters are callbacks to handle those stream states
```
### Just Show Me the Code
```javascript
import {useRx, useRxState} from 'rxhooks';
import { scan } from 'rxjs/operators';
import { interval } from 'rxjs';
// Read from an Observable stream
function ExampleUseRx() {
const stream = (x) => interval(1000 * x);
const [speed, setSpeed] = useState(1);
const [count] = useRx( stream, speed );
return <>
setSpeed(speed+1)}>Make slower via initialValue change
speed {speed}{' '}|{' '}count {count}
>
}
// Two-way communication between the component and Observable.
// The signalCount callback pushes values into the Observable source.
// Parameter "scan( (acc, x) => x+acc, 0)" creates a rolling sum upon the output stream
function ExampleUseRxState() {
const initialVal = 1;
const [count, signalCount] = useRxState(initialVal,
scan( (acc, x) => x+acc, 0)
);
const onClick = () => {
signalCount(1);
}
return <>
Add 1
count {count}
>
}
class App extends Component {
render() {
return (
);
}
}
export default App;
```