# reactivehooks

> Reactive Extensions helpers for React Hooks

Latest version **0.0.7** (published 2020-09-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install reactivehooks
pnpm add reactivehooks
yarn add reactivehooks
bun add reactivehooks
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.7 |
| Published | 2020-09-12 |
| First published | 2019-08-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 98.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 16 |
| Author | Lucas Teles |
| Maintainers | lucasteles |
| Keywords | hooks, react, rx, rxjs, reactive |

## Links

- npm: https://www.npmjs.com/package/reactivehooks
- Repository: https://github.com/lucasteles/reactivehooks
- Homepage: https://github.com/lucasteles/reactivehooks#readme
- Issues: https://github.com/lucasteles/reactivehooks/issues
- npm.io page: https://npm.io/package/reactivehooks

## Dependencies (4)

- [rxjs](https://npm.io/package/rxjs.md) ^6.5.2
- [react](https://npm.io/package/react.md) ^16.8.6
- [typescript](https://npm.io/package/typescript.md) 3.5.3
- [@types/react](https://npm.io/package/@types/react.md) 16.8.24

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.7 (latest) — 2020-09-12
- 0.0.6 — 2020-04-16
- 0.0.5 — 2019-08-14
- 0.0.4 — 2019-08-07
- 0.0.3 — 2019-08-07
- 0.0.2 — 2019-08-06
- 0.0.1 — 2019-08-06

## README

# Reactive Hooks
[![npm version](https://badge.fury.io/js/reactivehooks.svg)](https://badge.fury.io/js/reactivehooks)
[![Build Status](https://travis-ci.org/lucasteles/reactivehooks.svg?branch=master)](https://travis-ci.org/lucasteles/reactivehooks)
[![Coverage Status](https://img.shields.io/coveralls/github/lucasteles/reactivehooks/master.svg)](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<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:
```ts
 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:
```ts
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:
```ts
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:
```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<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:
```ts
function fetchJson<T>(
  url: string | Request, 
  init?: RequestInit
): Observable<T>
```
---

---
_Source: https://npm.io/package/reactivehooks · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._