npm install rxjs-react

``javascript
// ES2015
import { reactive } from 'rxjs-react'

// Commonjs
const { reactive } = require('rxjs-react')
`



Table of Contents 👇

* Motivation
* Usage
* API Doc

Motivation

React Suspense is a great new feature in react, it supports writing async code in render function without async/await syntax, and making data-fetching, loading and code-spliting become easier and simpler.

What if we go further?

Put observable(rxjs) in render function.

click to see reactive demo

`javascript
import React from 'react'
import { render } from 'react-dom'
import { reactive } from 'rxjs-react'
import { from, of } from 'rxjs'
import { delay, scan, concatMap } from 'rxjs/operators'

const App = reactive(() => {
const hello$ = from('hello rxjs-react!').pipe(
concatMap(char => of(char).pipe(delay(300))),
scan((str, char) => str + char, ''),
map(text =>

{text}

)
)
return

{hello$}

})

render(, document.getElementById('root'))
`

Usage

reactive element

ReactElement can be reactive.

click to see reactive demo

`javascript
import React from 'react'
import { render } from 'react-dom'
import { reactive } from 'rxjs-react'
import { interval } from 'rxjs'

const app = reactive(

{interval(10)}

)
render(app, document.getElementById('root'))
`

reactive props

Props can be reactive.

click to see reactive demo

`javascript
import React from 'react'
import { render } from 'react-dom'
import { reactive } from 'rxjs-react'
import { interval } from 'rxjs'

const Count = props =>

count {props.count} from reactive props

const app = reactive()

render(app, document.getElementById('root'))
`

reactive component

ReactComponent` can be reactive.