\n );\n}\n```\n\n- [useEventCallback - live demo](https://codesandbox.io/s/jpjr31qmw)\n\n```javascript\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { useEventCallback } from \"rxjs-hooks\";\nimport { map } from \"rxjs/operators\";\n\nfunction App() {\n const [clickCallback, [description, x, y]] = useEventCallback((event$) =>\n event$.pipe(\n map((event) => [event.target.innerHTML, event.clientX, event.clientY]),\n ),\n [\"nothing\", 0, 0],\n )\n\n return (\n
\n
click position: {x}, {y}
\n
\"{description}\" was clicked.
\n \n \n \n
\n );\n}\n```\n\n## Apis\n\n### `useObservable`\n\n```tsx\nexport type InputFactory = (state$: Observable) => Observable\nexport type InputFactoryWithInputs = (\n state$: Observable,\n inputs$: Observable>,\n) => Observable\n\nexport function useObservable(inputFactory: InputFactory): State | null\nexport function useObservable(inputFactory: InputFactory, initialState: State): State\nexport function useObservable(\n inputFactory: InputFactoryWithInputs,\n initialState: State,\n inputs: RestrictArray,\n): State\n```\n\n#### Examples:\n\n```tsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { useObservable } from 'rxjs-hooks'\nimport { of } from 'rxjs'\n\nfunction App() {\n const value = useObservable(() => of(1000))\n return (\n // render twice\n // null and 1000\n
{value}
\n )\n}\n\nReactDOM.render(, document.querySelector('#app'))\n```\n\n**With default value:**\n\n```tsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { useObservable } from 'rxjs-hooks'\nimport { of } from 'rxjs'\n\nfunction App() {\n const value = useObservable(() => of(1000), 200)\n return (\n // render twice\n // 200 and 1000\n
{value}
\n )\n}\n\nReactDOM.render(, document.querySelector('#app'))\n```\n\n**Observe props change:**\n```tsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { useObservable } from 'rxjs-hooks'\nimport { of } from 'rxjs'\nimport { map } from 'rxjs/operators'\n\nfunction App(props: { foo: number }) {\n const value = useObservable((_, inputs$) => inputs$.pipe(\n map(([val]) => val + 1),\n ), 200, [props.foo])\n return (\n // render three times\n // 200 and 1001 and 2001\n
{value}
\n )\n}\n\nReactDOM.render(, document.querySelector('#app'))\nReactDOM.render(, document.querySelector('#app'))\n```\n\n**useObservable with state$**\n\n[live demo](https://codesandbox.io/s/7jwv36w876)\n\n```tsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { useObservable } from 'rxjs-hooks'\nimport { interval } from 'rxjs'\nimport { map, withLatestFrom } from 'rxjs/operators'\n\nfunction App() {\n const value = useObservable((state$) => interval(1000).pipe(\n withLatestFrom(state$),\n map(([_num, state]) => state * state),\n ), 2)\n return (\n // 2\n // 4\n // 16\n // 256\n // ...\n
\n );\n};\n```\n\n## Known issues\nIf you are using React 18 + `StrictMode`, `rxjs-hooks` will not work properly. Because in React 18, `StrictMode` will force unmount hooks to trigger twice, which will result in unexpected behaviours.\n","readmeFilename":"README.md"}