// ES2015
import { reactive } from 'rxjs-react'
 
// Commonjs
const { reactive } = require('rxjs-react')

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'))

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'))

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'))