react-purify

react-purify

This handy ES7 decorators makes it easy to implement (or migrate gradually) your react-components to a flux-like architecture. Goal of this library is empowering users to purify components quickly without breaking existing architectures.

mixins :

import {pure,mix} form 'react-purify'

@pure() // pureRenderMixin
class MyPureComponent extends React.Component {
 //...
}

//if you need more mixins :
@mix([LinkedStateMixin,PureRenderMixins,...])
class MyComp {
  //...
}

ready to use component-factories

import {UI,pureUI} form 'react-purify'

const MyPureComponent = pureUI( p=> (<h1>{p.title} </h1>) ); 
const MyImpureComponent = UI( p=>(<h1> {globalState} </h1>) );

context-helpers

var appState={todo:[/*...*/]};

import {inject,use} form 'react-purify'

@inject({appState}) // or @inject({appState:appState})
class TodoApp {
  render(){
     return <TodoList />
  }
}

@use( // transfers context to props
  ['appState'], //get the appState
  p=>({ //extract component dependencies
    todo:p.appState.todo
  })
)
@pure() // lets only redraw if todos have changed
class TodoList {
  render(){
     return <ul>{this.props.todo.map( (todo,k)=> <li key={k} >{todo}</li> )}</ul>
  }
}

//The example above shows how you can gradually move dependencies. Following code is equivallent :

@inject({appState}) 
@use(['appState'],p=>(
  {todo:p.appState.todo})
) 
class TodoApp {
  render(){
     return <TodoList {...this.props.todo}/>
  }
}

@pure()
class TodoList {
  render(){
     return <ul>{this.props.todo.map( (todo,k)=> <li key={k} >{todo}</li> )}</ul>
  }
}