Package Exports
- react-mini
- react-mini/pure
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-mini) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
react-mini 
Create minimalistic react components
Allows you to create thisless react components. With react >= 0.14 stateless function components are supported by react itself. But with react-mini you can create statefull function components.
Install
$ npm install --save react-miniUsage
var React = require('react');
var mini = require('react-mini');
module.exports = mini( props => <h1>Title: {props.title}</h1> );
module.exports = mini( ({ title }) => <h1>Title: {title}</h1> );
module.exports = mini( ({ hidden = false, title }) => !hidden?<h1>Title: {title}</h1>:null );
module.exports = mini( ({ greet = 'Hi', name }) => <h1>{greet} {name}</h1> );Pure components
Create pure components using PureRenderMixin
var React = require('react');
var pure = require('react-mini/pure');
module.exports = pure( ({ title }) => <h1>Title: {title}</h1> );with props and state thisless
var Counter = mini( ({ step = 1 } , { setState, state: { count } }) => {
var incCounter = () => setState({ count : count + step });
return <span>Counter: {count}<button onClick={incCounter}>+1</button></span>
}, { count: 10 }); // <= initialState
React.render(
<Counter step={10}/>,
document.body
)API
mini(render:Function(props, component), [initialState:Object])
render: This is the actual render function.props:Object: The props of the componentcomponent:Object: The component (this)
initialState: The initial state of the component.
Related
- react-mini-this -
function HelloWorld({name}) { return <h1> Hello {name} </h1>; }::pure();
License
MIT © Christoph Hermann