Nearly Perpendicular Macaroons
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    react-minipublic

    react-mini Build Status

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

    Usage

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

    install

    npm i react-mini

    Downloadsweekly downloads

    8

    version

    1.1.0

    license

    MIT

    repository

    githubgithub

    last publish

    collaborators

    • avatar