diff --git a/README.md b/README.md index 9605dfa..d53231e 100644 --- a/README.md +++ b/README.md @@ -26,17 +26,25 @@ interface IProps { } export const Counter: React.FC = ({ start }) => { - const [ value ] = useObservable(() => { - return rxjs.interval(1000) - .pipe( - map(v => v + start), - startWith(start), - ); - }, [start]) + return rxjs.interval(1000).pipe( + map(v => v + start), + startWith(start) + ); + }, [/* deps */]) return ( -

Started with {start}, value: {value}

+

Started with undefined, value: {value}

); } -``` \ No newline at end of file +``` + +## API + +| Hook | Return | Description | +| --------------------------------------------- | ------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| useObservable(Func, DepsArray) | Value, Error, Completed | Run the observable function on every deps change, the first value will be undefined | +| useRetryableObservable(Func, DepsArray) | Value, Error, Completed, RetryFunc | Same useObservable, but the last value of return is a retry function to rerun the observable function, useful when an error happens or do a refresh | +| useMappedObservable(Func, MapFunc, DepsArray) | Value, Error, Completed | Same useObservable, but with a internal map and a distinctUntilChanged, useful to do less renders | +| useCallbackObservable(Func, DepsArray) | CallbackFunc, Value, Error, Completed | Same useObservable, but the first result is the callbackFunction and run the observable function only when it is called, useful to use in a submit or button's click and keep the unsubscribe on unmount | + diff --git a/src/callbackObservable.ts b/src/callbackObservable.ts index ab64d48..ee85cf5 100644 --- a/src/callbackObservable.ts +++ b/src/callbackObservable.ts @@ -11,7 +11,7 @@ import { useObservable } from './observable'; export function useCallbackObservable Observable>( observableGenerator: T, deps: DependencyList -): [() => void, T | undefined, any, boolean] { +): [() => void, T | undefined, any, boolean, undefined] { const [error, setError] = useState(); const submitted$ = useRef(new Subject()).current; @@ -31,5 +31,5 @@ export function useCallbackObservable Observable submitted$.next(args), [submitted$]); - return [callback, data, error, completed] as [typeof callback, T | undefined, any, boolean]; + return [callback, data, error, completed, undefined]; } diff --git a/src/mappedObservable.ts b/src/mappedObservable.ts index 44bc2ac..aae6bd7 100644 --- a/src/mappedObservable.ts +++ b/src/mappedObservable.ts @@ -12,7 +12,7 @@ export function useMappedObservable( observableGenerator: observerFunction, mapperFunction: (data: T) => W, deps: DependencyList -): [W | undefined, any, boolean] { +): [W | undefined, any, boolean, undefined] { const newGenerator = useCallback(() => { return observableGenerator().pipe( map(mapperFunction), diff --git a/src/observable.ts b/src/observable.ts index 6b00fa3..047bf2c 100644 --- a/src/observable.ts +++ b/src/observable.ts @@ -10,7 +10,7 @@ export type observerFunction = () => Observable; export function useObservable( observableGenerator: observerFunction, deps: DependencyList -): [T | undefined, any, boolean] { +): [T | undefined, any, boolean, undefined] { const [value, setValue] = useState(); const [error, setError] = useState(); const [complete, setComplete] = useState(false); @@ -36,5 +36,5 @@ export function useObservable( return () => sub.unsubscribe(); }, [cb]); - return [value, error, complete]; + return [value, error, complete, undefined]; } diff --git a/src/retryableObservable.ts b/src/retryableObservable.ts index 2a99677..98bdcd3 100644 --- a/src/retryableObservable.ts +++ b/src/retryableObservable.ts @@ -9,10 +9,10 @@ import { observerFunction, useObservable } from './observable'; * retry function * @returns [observableValue, error, isCompleted, retryFunction] */ -export function useRetryableObservable( +export function useRetryableObservable( observableGenerator: observerFunction, deps: DependencyList -): [W | undefined, any, boolean, () => void] { +): [T | undefined, any, boolean, () => void, undefined] { const [data, setData] = useState(); const [error, setError] = useState(); const submitted$ = useRef(new BehaviorSubject(true)).current; @@ -35,5 +35,5 @@ export function useRetryableObservable( const retry = useCallback(() => submitted$.next(true), [submitted$]); - return [data, error, completed, retry] as [W | undefined, any, boolean, typeof retry]; + return [data, error, completed, retry, undefined]; }