https://github.com/lucasteles/reactivehooks
Helpers to use with RxJs and React Hooks for HTML controls
https://github.com/lucasteles/reactivehooks
Last synced: 8 months ago
JSON representation
Helpers to use with RxJs and React Hooks for HTML controls
- Host: GitHub
- URL: https://github.com/lucasteles/reactivehooks
- Owner: lucasteles
- License: mit
- Created: 2019-08-04T03:28:01.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T18:04:10.000Z (almost 3 years ago)
- Last Synced: 2025-01-09T15:47:09.792Z (9 months ago)
- Language: TypeScript
- Homepage:
- Size: 6.43 MB
- Stars: 16
- Watchers: 0
- Forks: 1
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Reactive Hooks
[](https://badge.fury.io/js/reactivehooks)
[](https://travis-ci.org/lucasteles/reactivehooks)
[](https://coveralls.io/github/lucasteles/reactivehooks?branch=master)
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**](https://stackblitz.com/edit/rectivehooks-sample)
## Installation
Nothing new here, just npm install
```sh
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](https://github.com/ReactiveX/rxjs):
* for a more complete example check the [**sample project**](https://github.com/lucasteles/reactivehookssample) or check this working [online sample](https://stackblitz.com/edit/rectivehooks-sample)
```tsx
// api fetch that returns an observable
const searchStarWarsPeople = (name: string) =>
fetchJson(`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 (
{isLoading && loading...}
{starWarsPeople.map((x, i) =>
-
{x.name}
)}
)
}
```
# Documentation
## useSubscribe
A hook that provides a way to just subscribe to an observable
Signature:
```ts
function useSubscribe(
observable: Observable,
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:
```ts
function useObservable(
observable: Observable,
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:
```ts
function useObservableWithError(
observable: Observable,
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:
```ts
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:
```ts
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:
```ts
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:
```ts
function createLoaderControl(): {
start(): function(x: Observable): Observable;
stop(): function(x: Observable): Observable;
status$: Observable
}
```
---
## fetchJson
Is just the `fromFetch` from `rxjs/fetch`, but auto map to `json()`
Signature:
```ts
function fetchJson(
url: string | Request,
init?: RequestInit
): Observable
```
---