npm install rxjs-react

// 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

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 => <h1>{text}</h1>)
	)
	return <div>{hello$}</div>
})

render(<App />, document.getElementById('root'))

Usage

reactive element

ReactElement can be reactive.

click to see reactive demo

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

const app = reactive(<h1>{interval(10)}</h1>)
render(app, document.getElementById('root'))

reactive props

Props can be reactive.

click to see reactive demo

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

const Count = props => <h1>count {props.count} from reactive props</h1>

const app = reactive(<Count count={interval(10)} />)

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

reactive component

ReactComponent can be reactive.