Applies a stream to a component's state.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore
.npmignore
.travis.yml
README.md
index.js
package.json
test.js

README.md

react-announce-connect

Build Status npm

A react-announce declarative that applies an observable onto the component state.

Install

npm i react-announce-connect --save

Timer example

The following example will display the time and get updated every 100ms.

import {connect} from 'react-announce-connect'
import {Observable} from 'rx'
import {Component} from 'react'

const time = Observable.interval(100).map(() => new Date())

@connect({time})
class Timer extends Component {

  render () {
    return (
      <div>{this.state.time}</div>
    )
  }
}

Responsive font-size example

Creating responsive Layouts. This will auto select the font-size based on the screen size.

import {connect} from 'react-announce-connect'
import {Observable} from 'rx'
import {Component} from 'react'

const windowEvents = Observable.fromCallback(window.addEventListner)
const _screen = windowEvents('resize')
  .debounce(300)
  .pluck('target', 'innerWidth')
  .map(x => {
    if(x < 768){ return 'xs' }
    if(x < 992){ return 'sm' }
    if(x < 1200){ return 'md' }
    return 'lg'
  })

/*
You can create a new reusable decorator for screen size
*/
const screen =  connect({screen: _screen})


@screen
class Heading extends Component {
  render () {
    const style = {fontSize: {xs: 10, sm: 12, md: 14, lg: 18}[this.state.screen]}
    return (
      <div style={style}>Hello World!</div>
    )
  }
}

A reusable screen decorator can be created from the connect decorator.

Connection to multiple streams

The connect declarative can connect to multiple stream as follows —

@connect({key1: stream1, key2: stream2})
class MyComponent extends React {
  ...
}

Whenever either of the streams viz — stream1 or stream2, emit a value, it would be applied to the state property key1 and key2 respectively.

Performance

The @connect declarative, optimizes internally so that the state doesn't get updated unless there is an actual change in the value. For instance, if a stream keeps emiting the same value again and again, unless the value changes, the state will not be updated.