react-mini-this

Create react components as pure functions with function bind syntax

Install

$ npm install --save react-mini-this

Usage

var React = require('react');
var mini = require('react-mini-this');
var pure = require('react-mini-this/pure');


module.exports = (
  props => <h1>Title: {props.title}</h1> 
)::mini();

module.exports = (
  { title } => <h1>Title: {title}</h1> 
)::pure();

with props and state

const Counter = function ( ({ step = 1 } , { setState, state: { count } }) { 
	var incCounter = () => setState({ count : count + step });

  return <span>Counter: {count}<button onClick={incCounter}>+1</button></span> 
}::mini( { count: 10 });

React.render(
  <Counter step={10}/>,
  document.body
)

API

(render:Function(props, component))::mini([initialState:Object])

• render : This is the actual render function.
  • props:Object : The props of the component
  • component:Object : The component (this)
• initialState : The initial state of the component.

Related

• react-mini

:: huh?

If you’re wondering what the :: thing means, you’d better read this excellent overview by @jussi-kalliokoski or have a look at the function bind syntax proposal.

License

MIT © Christoph Hermann