react-rx 1.0.0-beta.4 → 1.0.1

package/dist/es2015/reactiveComponent.d.ts

@@ -1,8 +1,8 @@
-import * as React from 'react';
 import { Observable } from 'rxjs';
-declare type Component<Props> = (input$: Observable<Props>) => Observable<React.ReactNode>;
-export declare function reactiveComponent<Props>(observable: Observable<Props>): React.FunctionComponent<{}>;
-export declare function reactiveComponent<Props>(component: Component<Props>): React.FunctionComponent<Props>;
-declare type ForwardRefComponent<RefType, Props> = (input$: Observable<Props>, ref: React.Ref<RefType>) => Observable<React.ReactNode>;
-export declare function forwardRef<RefType, Props = {}>(component: ForwardRefComponent<RefType, Props>): React.ForwardRefExoticComponent<React.PropsWithoutRef<Props> & React.RefAttributes<RefType>>;
+import { FunctionComponent, ReactNode, Ref } from 'react';
+declare type Component<Props> = (input$: Observable<Props>) => Observable<ReactNode>;
+export declare function reactiveComponent<Props>(observable: Observable<Props>): FunctionComponent<{}>;
+export declare function reactiveComponent<Props>(component: Component<Props>): FunctionComponent<Props>;
+declare type ForwardRefComponent<RefType, Props> = (input$: Observable<Props>, ref: Ref<RefType>) => Observable<ReactNode>;
+export declare function forwardRef<RefType, Props = {}>(component: ForwardRefComponent<RefType, Props>): import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<Props> & import("react").RefAttributes<RefType>>;
 export {};

package/dist/es2015/reactiveComponent.js

@@ -1,17 +1,17 @@
-import * as React from 'react';
 import { wrapDisplayName } from './displayName';
 import { useAsObservable } from './useAsObservable';
 import { useObservable } from './useObservable';
+import { createElement, Fragment, useRef, forwardRef as reactForwardRef, } from 'react';
 function fromComponent(component) {
     const wrappedComponent = (props) => {
-        return React.createElement(React.Fragment, null, useObservable(React.useRef(component(useAsObservable(props))).current));
+        return createElement(Fragment, null, useObservable(useRef(component(useAsObservable(props))).current));
     };
     wrappedComponent.displayName = wrapDisplayName(component, 'reactiveComponent');
     return wrappedComponent;
 }
 function fromObservable(input$) {
     return function ReactiveComponent() {
-        return React.createElement(React.Fragment, null, useObservable(input$));
+        return createElement(Fragment, null, useObservable(input$));
     };
 }
 export function reactiveComponent(observableOrComponent) {
@@ -20,8 +20,8 @@ export function reactiveComponent(observableOrComponent) {
         : fromObservable(observableOrComponent);
 }
 export function forwardRef(component) {
-    const wrappedComponent = React.forwardRef((props, ref) => {
-        return React.createElement(React.Fragment, null, useObservable(React.useRef(component(useAsObservable(props), ref)).current));
+    const wrappedComponent = reactForwardRef((props, ref) => {
+        return createElement(Fragment, null, useObservable(useRef(component(useAsObservable(props), ref)).current));
     });
     wrappedComponent.displayName = wrapDisplayName(component, 'reactiveComponent');
     return wrappedComponent;

package/dist/es2015/useAsObservable.d.ts

@@ -6,3 +6,4 @@ import { Observable } from 'rxjs';
  * @param value
  */
 export declare function useAsObservable<T>(value: T): Observable<T>;
+export declare function useAsObservable<T, K>(value: T, operator: (input: Observable<T>) => Observable<K>): Observable<K>;

package/dist/es2015/useAsObservable.js

@@ -1,19 +1,15 @@
 import { BehaviorSubject } from 'rxjs';
-import * as React from 'react';
-/**
- * React hook to convert any props or state value into an observable
- * Returns an observable representing updates to any React value (props, state or any other calculated value)
- * Note: the returned observable is the same instance throughout the component lifecycle
- * @param value
- */
-export function useAsObservable(value) {
-    const isInitial = React.useRef(true);
-    const subjectRef = React.useRef(new BehaviorSubject(value));
-    const observableRef = React.useRef();
+import { useRef } from 'react';
+import { useIsomorphicEffect } from './useIsomorphicEffect';
+export function useAsObservable(value, operator) {
+    const isInitial = useRef(true);
+    const subjectRef = useRef(new BehaviorSubject(value));
+    const observableRef = useRef();
     if (!observableRef.current) {
-        observableRef.current = subjectRef.current.asObservable();
+        const observable = subjectRef.current.asObservable();
+        observableRef.current = operator ? observable.pipe(operator) : observable;
     }
-    React.useEffect(() => {
+    useIsomorphicEffect(() => {
         if (isInitial.current) {
             isInitial.current = false;
         }
@@ -22,7 +18,7 @@ export function useAsObservable(value) {
             subjectRef.current.next(value);
         }
     }, [value]);
-    React.useEffect(() => {
+    useIsomorphicEffect(() => {
         return () => {
             return subjectRef.current.complete();
         };

package/dist/es2015/useIsomorphicEffect.d.ts

@@ -0,0 +1,2 @@
+import { useLayoutEffect } from 'react';
+export declare const useIsomorphicEffect: typeof useLayoutEffect;

package/dist/es2015/useIsomorphicEffect.js

@@ -0,0 +1,2 @@
+import { useEffect, useLayoutEffect } from 'react';
+export const useIsomorphicEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;

package/dist/es2015/useObservable.d.ts

@@ -1,7 +1,7 @@
-import * as React from 'react';
 import { Observable } from 'rxjs';
-export declare function useObservable<T>(observable$: Observable<T>): T | undefined;
-export declare function useObservable<T>(observable$: Observable<T>, initialValue: T): T;
-export declare function useObservable<T>(observable$: Observable<T>, initialValue: () => T): T;
-export declare function useMemoObservable<T>(observableOrFactory: Observable<T> | (() => Observable<T>), deps: React.DependencyList): Observable<T | undefined>;
-export declare function useMemoObservable<T>(observableOrFactory: Observable<T> | (() => Observable<T>), deps: React.DependencyList, initialValue: T | (() => T)): Observable<T>;
+import { DependencyList } from 'react';
+export declare function useObservable<T>(observable: Observable<T>): T | undefined;
+export declare function useObservable<T>(observable: Observable<T>, initialValue: T): T;
+export declare function useObservable<T>(observable: Observable<T>, initialValue: () => T): T;
+export declare function useMemoObservable<T>(observableOrFactory: Observable<T> | (() => Observable<T>), deps: DependencyList): T | undefined;
+export declare function useMemoObservable<T>(observableOrFactory: Observable<T> | (() => Observable<T>), deps: DependencyList, initialValue: T | (() => T)): T;

package/dist/es2015/useObservable.js

@@ -1,11 +1,12 @@
-import * as React from 'react';
+import { useMemo, useRef, useState } from 'react';
+import { useIsomorphicEffect } from './useIsomorphicEffect';
 function getValue(value) {
     return typeof value === 'function' ? value() : value;
 }
 export function useObservable(observable, initialValue) {
-    const subscription = React.useRef();
-    const isInitial = React.useRef(true);
-    const [value, setState] = React.useState(() => {
+    const subscription = useRef();
+    const isInitial = useRef(true);
+    const [value, setState] = useState(() => {
         let isSync = true;
         let syncVal = getValue(initialValue);
         subscription.current = observable.subscribe(nextVal => {
@@ -19,8 +20,8 @@ export function useObservable(observable, initialValue) {
         isSync = false;
         return syncVal;
     });
-    React.useEffect(() => {
-        // when the observable$ changes after initial (possibly sync render)
+    useIsomorphicEffect(() => {
+        // when the observable changes after initial (possibly sync render)
         if (!isInitial.current) {
             subscription.current = observable.subscribe(nextVal => setState(nextVal));
         }
@@ -35,5 +36,5 @@ export function useObservable(observable, initialValue) {
     return value;
 }
 export function useMemoObservable(observableOrFactory, deps, initialValue) {
-    return useObservable(React.useMemo(() => getValue(observableOrFactory), deps), initialValue);
+    return useObservable(useMemo(() => getValue(observableOrFactory), deps), initialValue);
 }

package/dist/es2015/useObservableCallback.d.ts

@@ -0,0 +1,3 @@
+import { DependencyList } from 'react';
+import { Observable } from 'rxjs';
+export declare function useObservableCallback<T, U>(fn: (arg: Observable<T>) => Observable<U>, dependencies?: DependencyList): (arg: T) => void;

package/dist/es2015/useObservableCallback.js

@@ -0,0 +1,19 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { observableCallback } from 'observable-callback';
+const EMPTY_DEPS = [];
+export function useObservableCallback(fn, dependencies = EMPTY_DEPS) {
+    const callbackRef = useRef();
+    if (!callbackRef.current) {
+        callbackRef.current = observableCallback();
+    }
+    const [calls$, call] = callbackRef.current;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const callback = useCallback(fn, dependencies);
+    useEffect(() => {
+        const subscription = calls$.pipe(callback).subscribe();
+        return () => {
+            subscription.unsubscribe();
+        };
+    }, [calls$, call, callback]);
+    return call;
+}

package/dist/es2015/useWithObservable.d.ts

@@ -0,0 +1,9 @@
+import { Observable } from 'rxjs';
+/**
+ * React hook to convert any props or state value into an observable
+ * Returns an observable representing updates to any React value (props, state or any other calculated value)
+ * Note: the returned observable is the same instance throughout the component lifecycle
+ * @param value
+ */
+export declare function useWithObservable<T>(value: T): T | undefined;
+export declare function useWithObservable<T, K>(value: T, operator: (input: Observable<T>) => Observable<K>): K | undefined;

package/dist/es2015/useWithObservable.js

@@ -0,0 +1,7 @@
+import { useObservable } from './useObservable';
+import { useAsObservable } from './useAsObservable';
+export function useWithObservable(value, operator) {
+    return operator
+        ? useObservable(useAsObservable(value, operator))
+        : useObservable(useAsObservable(value));
+}

package/dist/es2015/utils.d.ts

@@ -1,7 +1,7 @@
 import { Observable, OperatorFunction } from 'rxjs';
-import * as React from 'react';
-export declare function observeState<T>(initial: T | (() => T)): [Observable<T>, React.Dispatch<React.SetStateAction<T>>];
+import { Dispatch, SetStateAction, Context } from 'react';
+export declare function observeState<T>(initial: T | (() => T)): [Observable<T>, Dispatch<SetStateAction<T>>];
 export declare function observeCallback<T>(): [Observable<T>, (arg: T) => void];
 export declare function observeCallback<T, K>(operator: OperatorFunction<T, K>): [Observable<K>, (arg: T) => void];
-export declare function observeContext<T>(context: React.Context<T>): Observable<T>;
+export declare function observeContext<T>(context: Context<T>): Observable<T>;
 export declare function observeElement<T>(): [Observable<T | null>, (el: T | null) => void];

package/dist/es2015/utils.js

@@ -1,24 +1,24 @@
-import * as React from 'react';
 import { useAsObservable } from './useAsObservable';
 import { observableCallback } from 'observable-callback';
 import { startWith } from 'rxjs/operators';
+import { useContext, useRef, useState } from 'react';
 const createState = (initialState) => observableCallback(startWith(initialState));
 export function observeState(initial) {
-    const [value, update] = React.useState(initial);
+    const [value, update] = useState(initial);
     return [useAsObservable(value), update];
 }
 export function observeCallback(operator) {
-    const ref = React.useRef();
+    const ref = useRef();
     if (!ref.current) {
         ref.current = operator ? observableCallback(operator) : observableCallback();
     }
     return ref.current;
 }
 export function observeContext(context) {
-    return useAsObservable(React.useContext(context));
+    return useAsObservable(useContext(context));
 }
 export function observeElement() {
-    const ref = React.useRef();
+    const ref = useRef();
     if (!ref.current) {
         ref.current = createState(null);
     }

package/dist/esm/WithObservable.d.ts

@@ -1,10 +1,10 @@
-import * as React from 'react';
 import { Observable } from 'rxjs';
+import { ComponentType, ReactNode } from 'react';
 interface Props<T> {
     observable: Observable<T>;
-    children: (value: T) => React.ReactNode;
+    children: (value: T) => ReactNode;
 }
-declare type ObservableComponent<T> = React.ComponentType<Props<T>>;
+declare type ObservableComponent<T> = ComponentType<Props<T>>;
 /**
  * @deprecated Use the useObservable hook instead
  */

package/dist/esm/index.d.ts

@@ -1,6 +1,7 @@
 export { reactiveComponent, reactiveComponent as rxComponent, forwardRef } from './reactiveComponent';
-export { useObservable, useMemoObservable } from './useObservable';
-export { useAsObservable } from './useAsObservable';
 export { observeState, observeCallback, observeContext, observeElement } from './utils';
 export { observeState as state, observeCallback as handler, observeContext as context, observeElement as elementRef, } from './utils';
 export { observableCallback } from 'observable-callback';
+export { useObservable, useMemoObservable } from './useObservable';
+export { useAsObservable } from './useAsObservable';
+export { useObservableCallback } from './useObservableCallback';

package/dist/esm/index.js

@@ -1,7 +1,9 @@
 // Main package exports
 export { reactiveComponent, reactiveComponent as rxComponent, forwardRef } from './reactiveComponent';
-export { useObservable, useMemoObservable } from './useObservable';
-export { useAsObservable } from './useAsObservable';
 export { observeState, observeCallback, observeContext, observeElement } from './utils';
 export { observeState as state, observeCallback as handler, observeContext as context, observeElement as elementRef, } from './utils';
 export { observableCallback } from 'observable-callback';
+// hooks
+export { useObservable, useMemoObservable } from './useObservable';
+export { useAsObservable } from './useAsObservable';
+export { useObservableCallback } from './useObservableCallback';

package/dist/esm/reactiveComponent.d.ts

@@ -1,8 +1,8 @@
-import * as React from 'react';
 import { Observable } from 'rxjs';
-declare type Component<Props> = (input$: Observable<Props>) => Observable<React.ReactNode>;
-export declare function reactiveComponent<Props>(observable: Observable<Props>): React.FunctionComponent<{}>;
-export declare function reactiveComponent<Props>(component: Component<Props>): React.FunctionComponent<Props>;
-declare type ForwardRefComponent<RefType, Props> = (input$: Observable<Props>, ref: React.Ref<RefType>) => Observable<React.ReactNode>;
-export declare function forwardRef<RefType, Props = {}>(component: ForwardRefComponent<RefType, Props>): React.ForwardRefExoticComponent<React.PropsWithoutRef<Props> & React.RefAttributes<RefType>>;
+import { FunctionComponent, ReactNode, Ref } from 'react';
+declare type Component<Props> = (input$: Observable<Props>) => Observable<ReactNode>;
+export declare function reactiveComponent<Props>(observable: Observable<Props>): FunctionComponent<{}>;
+export declare function reactiveComponent<Props>(component: Component<Props>): FunctionComponent<Props>;
+declare type ForwardRefComponent<RefType, Props> = (input$: Observable<Props>, ref: Ref<RefType>) => Observable<ReactNode>;
+export declare function forwardRef<RefType, Props = {}>(component: ForwardRefComponent<RefType, Props>): import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<Props> & import("react").RefAttributes<RefType>>;
 export {};

package/dist/esm/reactiveComponent.js

@@ -1,17 +1,17 @@
-import * as React from 'react';
 import { wrapDisplayName } from './displayName';
 import { useAsObservable } from './useAsObservable';
 import { useObservable } from './useObservable';
+import { createElement, Fragment, useRef, forwardRef as reactForwardRef, } from 'react';
 function fromComponent(component) {
     var wrappedComponent = function (props) {
-        return React.createElement(React.Fragment, null, useObservable(React.useRef(component(useAsObservable(props))).current));
+        return createElement(Fragment, null, useObservable(useRef(component(useAsObservable(props))).current));
     };
     wrappedComponent.displayName = wrapDisplayName(component, 'reactiveComponent');
     return wrappedComponent;
 }
 function fromObservable(input$) {
     return function ReactiveComponent() {
-        return React.createElement(React.Fragment, null, useObservable(input$));
+        return createElement(Fragment, null, useObservable(input$));
     };
 }
 export function reactiveComponent(observableOrComponent) {
@@ -20,8 +20,8 @@ export function reactiveComponent(observableOrComponent) {
         : fromObservable(observableOrComponent);
 }
 export function forwardRef(component) {
-    var wrappedComponent = React.forwardRef(function (props, ref) {
-        return React.createElement(React.Fragment, null, useObservable(React.useRef(component(useAsObservable(props), ref)).current));
+    var wrappedComponent = reactForwardRef(function (props, ref) {
+        return createElement(Fragment, null, useObservable(useRef(component(useAsObservable(props), ref)).current));
     });
     wrappedComponent.displayName = wrapDisplayName(component, 'reactiveComponent');
     return wrappedComponent;

package/dist/esm/useAsObservable.d.ts

@@ -6,3 +6,4 @@ import { Observable } from 'rxjs';
  * @param value
  */
 export declare function useAsObservable<T>(value: T): Observable<T>;
+export declare function useAsObservable<T, K>(value: T, operator: (input: Observable<T>) => Observable<K>): Observable<K>;

package/dist/esm/useAsObservable.js

@@ -1,19 +1,15 @@
 import { BehaviorSubject } from 'rxjs';
-import * as React from 'react';
-/**
- * React hook to convert any props or state value into an observable
- * Returns an observable representing updates to any React value (props, state or any other calculated value)
- * Note: the returned observable is the same instance throughout the component lifecycle
- * @param value
- */
-export function useAsObservable(value) {
-    var isInitial = React.useRef(true);
-    var subjectRef = React.useRef(new BehaviorSubject(value));
-    var observableRef = React.useRef();
+import { useRef } from 'react';
+import { useIsomorphicEffect } from './useIsomorphicEffect';
+export function useAsObservable(value, operator) {
+    var isInitial = useRef(true);
+    var subjectRef = useRef(new BehaviorSubject(value));
+    var observableRef = useRef();
     if (!observableRef.current) {
-        observableRef.current = subjectRef.current.asObservable();
+        var observable = subjectRef.current.asObservable();
+        observableRef.current = operator ? observable.pipe(operator) : observable;
     }
-    React.useEffect(function () {
+    useIsomorphicEffect(function () {
         if (isInitial.current) {
             isInitial.current = false;
         }
@@ -22,7 +18,7 @@ export function useAsObservable(value) {
             subjectRef.current.next(value);
         }
     }, [value]);
-    React.useEffect(function () {
+    useIsomorphicEffect(function () {
         return function () {
             return subjectRef.current.complete();
         };

package/dist/esm/useIsomorphicEffect.d.ts

@@ -0,0 +1,2 @@
+import { useLayoutEffect } from 'react';
+export declare const useIsomorphicEffect: typeof useLayoutEffect;

package/dist/esm/useIsomorphicEffect.js

@@ -0,0 +1,2 @@
+import { useEffect, useLayoutEffect } from 'react';
+export var useIsomorphicEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;

package/dist/esm/useObservable.d.ts

@@ -1,7 +1,7 @@
-import * as React from 'react';
 import { Observable } from 'rxjs';
-export declare function useObservable<T>(observable$: Observable<T>): T | undefined;
-export declare function useObservable<T>(observable$: Observable<T>, initialValue: T): T;
-export declare function useObservable<T>(observable$: Observable<T>, initialValue: () => T): T;
-export declare function useMemoObservable<T>(observableOrFactory: Observable<T> | (() => Observable<T>), deps: React.DependencyList): Observable<T | undefined>;
-export declare function useMemoObservable<T>(observableOrFactory: Observable<T> | (() => Observable<T>), deps: React.DependencyList, initialValue: T | (() => T)): Observable<T>;
+import { DependencyList } from 'react';
+export declare function useObservable<T>(observable: Observable<T>): T | undefined;
+export declare function useObservable<T>(observable: Observable<T>, initialValue: T): T;
+export declare function useObservable<T>(observable: Observable<T>, initialValue: () => T): T;
+export declare function useMemoObservable<T>(observableOrFactory: Observable<T> | (() => Observable<T>), deps: DependencyList): T | undefined;
+export declare function useMemoObservable<T>(observableOrFactory: Observable<T> | (() => Observable<T>), deps: DependencyList, initialValue: T | (() => T)): T;

package/dist/esm/useObservable.js

@@ -1,11 +1,12 @@
-import * as React from 'react';
+import { useMemo, useRef, useState } from 'react';
+import { useIsomorphicEffect } from './useIsomorphicEffect';
 function getValue(value) {
     return typeof value === 'function' ? value() : value;
 }
 export function useObservable(observable, initialValue) {
-    var subscription = React.useRef();
-    var isInitial = React.useRef(true);
-    var _a = React.useState(function () {
+    var subscription = useRef();
+    var isInitial = useRef(true);
+    var _a = useState(function () {
         var isSync = true;
         var syncVal = getValue(initialValue);
         subscription.current = observable.subscribe(function (nextVal) {
@@ -19,8 +20,8 @@ export function useObservable(observable, initialValue) {
         isSync = false;
         return syncVal;
     }), value = _a[0], setState = _a[1];
-    React.useEffect(function () {
-        // when the observable$ changes after initial (possibly sync render)
+    useIsomorphicEffect(function () {
+        // when the observable changes after initial (possibly sync render)
         if (!isInitial.current) {
             subscription.current = observable.subscribe(function (nextVal) { return setState(nextVal); });
         }
@@ -35,5 +36,5 @@ export function useObservable(observable, initialValue) {
     return value;
 }
 export function useMemoObservable(observableOrFactory, deps, initialValue) {
-    return useObservable(React.useMemo(function () { return getValue(observableOrFactory); }, deps), initialValue);
+    return useObservable(useMemo(function () { return getValue(observableOrFactory); }, deps), initialValue);
 }

package/dist/esm/useObservableCallback.d.ts

@@ -0,0 +1,3 @@
+import { DependencyList } from 'react';
+import { Observable } from 'rxjs';
+export declare function useObservableCallback<T, U>(fn: (arg: Observable<T>) => Observable<U>, dependencies?: DependencyList): (arg: T) => void;

package/dist/esm/useObservableCallback.js

@@ -0,0 +1,20 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { observableCallback } from 'observable-callback';
+var EMPTY_DEPS = [];
+export function useObservableCallback(fn, dependencies) {
+    if (dependencies === void 0) { dependencies = EMPTY_DEPS; }
+    var callbackRef = useRef();
+    if (!callbackRef.current) {
+        callbackRef.current = observableCallback();
+    }
+    var _a = callbackRef.current, calls$ = _a[0], call = _a[1];
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    var callback = useCallback(fn, dependencies);
+    useEffect(function () {
+        var subscription = calls$.pipe(callback).subscribe();
+        return function () {
+            subscription.unsubscribe();
+        };
+    }, [calls$, call, callback]);
+    return call;
+}

package/dist/esm/useWithObservable.d.ts

@@ -0,0 +1,9 @@
+import { Observable } from 'rxjs';
+/**
+ * React hook to convert any props or state value into an observable
+ * Returns an observable representing updates to any React value (props, state or any other calculated value)
+ * Note: the returned observable is the same instance throughout the component lifecycle
+ * @param value
+ */
+export declare function useWithObservable<T>(value: T): T | undefined;
+export declare function useWithObservable<T, K>(value: T, operator: (input: Observable<T>) => Observable<K>): K | undefined;

package/dist/esm/useWithObservable.js

@@ -0,0 +1,7 @@
+import { useObservable } from './useObservable';
+import { useAsObservable } from './useAsObservable';
+export function useWithObservable(value, operator) {
+    return operator
+        ? useObservable(useAsObservable(value, operator))
+        : useObservable(useAsObservable(value));
+}

package/dist/esm/utils.d.ts

@@ -1,7 +1,7 @@
 import { Observable, OperatorFunction } from 'rxjs';
-import * as React from 'react';
-export declare function observeState<T>(initial: T | (() => T)): [Observable<T>, React.Dispatch<React.SetStateAction<T>>];
+import { Dispatch, SetStateAction, Context } from 'react';
+export declare function observeState<T>(initial: T | (() => T)): [Observable<T>, Dispatch<SetStateAction<T>>];
 export declare function observeCallback<T>(): [Observable<T>, (arg: T) => void];
 export declare function observeCallback<T, K>(operator: OperatorFunction<T, K>): [Observable<K>, (arg: T) => void];
-export declare function observeContext<T>(context: React.Context<T>): Observable<T>;
+export declare function observeContext<T>(context: Context<T>): Observable<T>;
 export declare function observeElement<T>(): [Observable<T | null>, (el: T | null) => void];

package/dist/esm/utils.js

@@ -1,24 +1,24 @@
-import * as React from 'react';
 import { useAsObservable } from './useAsObservable';
 import { observableCallback } from 'observable-callback';
 import { startWith } from 'rxjs/operators';
+import { useContext, useRef, useState } from 'react';
 var createState = function (initialState) { return observableCallback(startWith(initialState)); };
 export function observeState(initial) {
-    var _a = React.useState(initial), value = _a[0], update = _a[1];
+    var _a = useState(initial), value = _a[0], update = _a[1];
     return [useAsObservable(value), update];
 }
 export function observeCallback(operator) {
-    var ref = React.useRef();
+    var ref = useRef();
     if (!ref.current) {
         ref.current = operator ? observableCallback(operator) : observableCallback();
     }
     return ref.current;
 }
 export function observeContext(context) {
-    return useAsObservable(React.useContext(context));
+    return useAsObservable(useContext(context));
 }
 export function observeElement() {
-    var ref = React.useRef();
+    var ref = useRef();
     if (!ref.current) {
         ref.current = createState(null);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-rx",
-  "version": "1.0.0-beta.4",
+  "version": "1.0.1",
   "description": "React + RxJS = <3",
   "main": "dist/cjs/index.js",
   "types": "dist/cjs/index.d.ts",
@@ -25,8 +25,8 @@
     "observable-callback": "^1.0.1"
   },
   "peerDependencies": {
-    "react": ">=16.8",
-    "rxjs": "^6"
+    "react": "^16.8 || ^17",
+    "rxjs": "^6.5 || ^7"
   },
   "devDependencies": {
     "@testing-library/dom": "^7.29.6",

package/src/WithObservable.tsx

@@ -2,20 +2,21 @@ import * as React from 'react'
 import {Observable} from 'rxjs'
 import {distinctUntilChanged, map, switchMap} from 'rxjs/operators'
 import {reactiveComponent} from './reactiveComponent'
+import {ComponentType, ReactNode} from 'react'
 
 interface Props<T> {
   observable: Observable<T>
-  children: (value: T) => React.ReactNode
+  children: (value: T) => ReactNode
 }
 
-type ObservableComponent<T> = React.ComponentType<Props<T>>
+type ObservableComponent<T> = ComponentType<Props<T>>
 
 function createWithObservable<T>(): ObservableComponent<T> {
   return reactiveComponent((props$: Observable<Props<T>>) =>
     props$.pipe(
       distinctUntilChanged((props, prevProps) => props.observable === prevProps.observable),
       switchMap(
-        (props): Observable<React.ReactNode> =>
+        (props): Observable<ReactNode> =>
           props.observable.pipe(map((observableValue: T) => props.children(observableValue))),
       ),
     ),

package/src/index.ts

@@ -1,9 +1,5 @@
 // Main package exports
 export {reactiveComponent, reactiveComponent as rxComponent, forwardRef} from './reactiveComponent'
-
-export {useObservable, useMemoObservable} from './useObservable'
-
-export {useAsObservable} from './useAsObservable'
 export {observeState, observeCallback, observeContext, observeElement} from './utils'
 export {
   observeState as state,
@@ -12,3 +8,8 @@ export {
   observeElement as elementRef,
 } from './utils'
 export {observableCallback} from 'observable-callback'
+
+// hooks
+export {useObservable, useMemoObservable} from './useObservable'
+export {useAsObservable} from './useAsObservable'
+export {useObservableCallback} from './useObservableCallback'