diff --git a/.circleci/config.yml b/.circleci/config.yml
index c1096f1d..e3ef6bd4 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -1,7 +1,7 @@
defaults: &defaults
working_directory: ~/rxjs-hooks
docker:
- - image: circleci/node:12-browsers
+ - image: circleci/node:16-browsers
version: 2
jobs:
@@ -34,7 +34,7 @@ jobs:
- attach_workspace:
at: ~/rxjs-hooks
- run: yarn lint
- - run: yarn test
+ - run: yarn coverage
- run:
name: report-coverage
command: npx codecov
@@ -46,7 +46,7 @@ jobs:
at: ~/rxjs-hooks
- run: echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" >> ~/.npmrc
- run: |
- if git log -1 --pretty=%B | grep "^v\?[0-9]\+\.[0-9]\+\.[0-9]\+$";
+ if git log -1 --pretty=%B | grep "^v\?[0-9]\+\.[0-9]\+\.[0-9]\+$\|^v\?[0-9]\+\.[0-9]\+\.[0-9]\+-alpha\.[0-9]\+$\|^v\?[0-9]\+\.[0-9]\+\.[0-9]\+-beta\.[0-9]\+$";
then
npm publish
else
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
new file mode 100644
index 00000000..2fa6a108
--- /dev/null
+++ b/.github/dependabot.yml
@@ -0,0 +1,80 @@
+version: 2
+updates:
+- package-ecosystem: npm
+ directory: "/"
+ schedule:
+ interval: daily
+ time: "21:00"
+ open-pull-requests-limit: 10
+ ignore:
+ - dependency-name: webpack
+ versions:
+ - 5.21.2
+ - 5.22.0
+ - 5.23.0
+ - 5.24.0
+ - 5.24.2
+ - 5.24.3
+ - 5.24.4
+ - 5.25.0
+ - 5.26.0
+ - 5.26.2
+ - 5.26.3
+ - 5.27.0
+ - 5.27.2
+ - 5.28.0
+ - 5.31.0
+ - 5.33.2
+ - 5.35.1
+ - 5.36.0
+ - dependency-name: ts-loader
+ versions:
+ - 8.0.16
+ - 8.0.17
+ - 8.0.18
+ - 9.0.2
+ - dependency-name: tslib
+ versions:
+ - 2.2.0
+ - dependency-name: "@typescript-eslint/eslint-plugin"
+ versions:
+ - 4.21.0
+ - dependency-name: "@types/webpack"
+ versions:
+ - 5.0.0
+ - dependency-name: "@types/react-dom"
+ versions:
+ - 17.0.1
+ - 17.0.2
+ - 17.0.3
+ - dependency-name: ts-jest
+ versions:
+ - 26.5.1
+ - 26.5.2
+ - 26.5.3
+ - 26.5.4
+ - dependency-name: html-webpack-plugin
+ versions:
+ - 5.1.0
+ - 5.2.0
+ - 5.3.0
+ - 5.3.1
+ - dependency-name: husky
+ versions:
+ - 5.0.9
+ - 5.1.1
+ - 5.1.2
+ - 5.1.3
+ - dependency-name: rxjs
+ versions:
+ - 6.6.6
+ - dependency-name: "@types/react-test-renderer"
+ versions:
+ - 17.0.1
+ - dependency-name: typescript
+ versions:
+ - 3.9.8
+ - 3.9.9
+ - dependency-name: source-map-loader
+ versions:
+ - 2.0.1
diff --git a/README.md b/README.md
index 1ab798b5..11fa0c77 100644
--- a/README.md
+++ b/README.md
@@ -25,11 +25,11 @@ $ yarn add rxjs-hooks rxjs
## Quick look
-- [useObservable - live demo](https://codesandbox.io/s/00x0z72l5n)
+- [useObservable - live demo](https://codesandbox.io/s/rxjs-hooks-basic-oee81n)
```javascript
import React from "react";
-import ReactDOM from "react-dom";
+import ReactDOM from "react-dom/client";
import { useObservable } from "rxjs-hooks";
import { interval } from "rxjs";
import { map } from "rxjs/operators";
@@ -45,11 +45,11 @@ function App() {
}
```
-- [useEventCallback - live demo](https://codesandbox.io/s/jpjr31qmw)
+- [useEventCallback - live demo](https://codesandbox.io/s/rxjs-hooks-useeventcallback-forked-5s1mvq)
```javascript
import React from "react";
-import ReactDOM from "react-dom";
+import ReactDOM from "react-dom/client";
import { useEventCallback } from "rxjs-hooks";
import { map } from "rxjs/operators";
@@ -109,8 +109,6 @@ function App() {
{value}
)
}
-
-ReactDOM.render(, document.querySelector('#app'))
```
**With default value:**
@@ -129,8 +127,6 @@ function App() {
{value}
)
}
-
-ReactDOM.render(, document.querySelector('#app'))
```
**Observe props change:**
@@ -138,7 +134,6 @@ ReactDOM.render(, document.querySelector('#app'))
import React from 'react'
import ReactDOM from 'react-dom'
import { useObservable } from 'rxjs-hooks'
-import { of } from 'rxjs'
import { map } from 'rxjs/operators'
function App(props: { foo: number }) {
@@ -151,18 +146,18 @@ function App(props: { foo: number }) {
{value}
)
}
-
-ReactDOM.render(, document.querySelector('#app'))
-ReactDOM.render(, document.querySelector('#app'))
+const rootElement = document.querySelector("#app");
+ReactDOM.createRoot(rootElement).render();
+ReactDOM.createRoot(rootElement).render();
```
**useObservable with state$**
-[live demo](https://codesandbox.io/s/7jwv36w876)
+[live demo](https://codesandbox.io/s/rxjs-hooks-useobservable-with-state-forked-9fjefy)
```tsx
import React from 'react'
-import ReactDOM from 'react-dom'
+import ReactDOM from 'react-dom/client'
import { useObservable } from 'rxjs-hooks'
import { interval } from 'rxjs'
import { map, withLatestFrom } from 'rxjs/operators'
@@ -181,8 +176,6 @@ function App() {
{value}
)
}
-
-ReactDOM.render(, document.querySelector('#root'))
```
### `useEventCallback`
@@ -212,7 +205,6 @@ function App() {
)
}
-ReactDOM.render(, document.querySelector('#app'))
```
**With initial value:**
@@ -241,16 +233,15 @@ function App() {
)
}
-ReactDOM.render(, document.querySelector('#app'))
```
**With state$:**
-[live demo](https://codesandbox.io/s/m95lz934x)
+[live demo](https://codesandbox.io/s/rxjs-hooks-useeventcallback-with-state-forked-rg1frx)
```tsx
import React from "react";
-import ReactDOM from "react-dom";
+import ReactDOM from "react-dom/client";
import { useEventCallback } from "rxjs-hooks";
import { map, withLatestFrom } from "rxjs/operators";
@@ -283,13 +274,11 @@ function App() {
);
}
-const rootElement = document.getElementById("root");
-ReactDOM.render(, rootElement);
```
-**A complex example: useEventCallback with both inputs$ and state$**
+**A complex example: useEventCallback with both `inputs$` and `state$`**
-[live demo](https://codesandbox.io/s/n1pn02jxym)
+[live demo](https://codesandbox.io/s/rxjs-hooks-useeventcallback-with-state-forked-tlwdil)
```tsx
import React, { useState } from "react";
@@ -338,13 +327,11 @@ function App() {
);
}
-const rootElement = document.getElementById("root");
-ReactDOM.render(, rootElement);
```
**Example of combining callback observables coming from separate elements - animation with start/stop button and rate controllable via slider**
-[live demo](https://codesandbox.io/s/pprzmxy230)
+[live demo](https://codesandbox.io/s/late-wood-x5rg0l)
```tsx
const Animation = ({ frame }) => {
@@ -396,3 +383,6 @@ const App = () => {
);
};
```
+
+## Known issues
+If you are using React 18 + `StrictMode` under NODE_ENV=development, `rxjs-hooks` may not work properly. https://github.com/facebook/react/issues/24502#issuecomment-1118846544
diff --git a/index.html b/index.html
index e8f0fe0d..f09ba13d 100644
--- a/index.html
+++ b/index.html
@@ -8,5 +8,6 @@
+