node package manager
Orgs are free. Discover, share, and reuse code in your team. Create a free org »

react-mini-this

react-mini-this Build Status

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

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