This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

sweetreaction

A collection of Sweet.js macros for the excellent React library.

You can use it together with jsx-reader or react.hiccup -- or both if you want some chaos :D

Usage

Something like this:

$ npm install sweet.js jsx-reader sweetreaction
$ sjs -r -l jsx-reader -m sweetreaction example.js

Basically, the sweetreaction npm module has the exported macros, use it with your usual Sweet.js setup.

Example

mixin SetIntervalMixin {
    componentWillMount() {
        this.intervals = [];
    }
    setInterval() {
        this.intervals.push(setInterval.apply(null, arguments));
    }
    componentWillUnmount() {
        this.intervals.map(clearInterval);
    }
}
 
component TickTock uses SetIntervalMixin {
    initialState {seconds: 0}
    defaultProps {name: "React"}
    componentDidMount() {
        this.setInterval(this.tick, 1000); // Call a method on the mixin
    }
    tick() {
        this.setState({seconds: TickTock.increment(this.state.seconds)});
    }
    render {
    this.unit = 'seconds';
        <p>
            {this.props.name} has been running for {this.state.seconds} {this.unit}.
        </p>
    }
    statics {
        increment(n) { return n + 1; }
    }
}
 
mount <TickTock /> to document.getElementById('example');

compiles to:

var SetIntervalMixin = {
    componentWillMount: function () {
        this.intervals = [];
    },
    setInterval: function () {
        this.intervals.push(setInterval.apply(null, arguments));
    },
    componentWillUnmount: function () {
        this.intervals.map(clearInterval);
    }
};
var TickTock = React.createClass({
  displayName: 'TickTock',
    mixins: [SetIntervalMixin],
    getInitialState: function () {
        return { seconds: 0 };
    },
    getDefaultProps: function () {
        return { name: 'React' };
    },
    componentDidMount: function () {
        this.setInterval(this.tick, 1000); // Call a method on the mixin
    },
    tick: function () {
        this.setState({ seconds: TickTock.increment(this.state.seconds) });
    },
    render: function () {
    this.unit = 'seconds';
        return React.DOM.p(null, this.props.name, ' has been running for ', this.state.seconds, ' ', this.unit, '.');
    },
    statics: {
        increment: function (n) {
            return n + 1;
        }
    }
});
React.renderComponent(TickTock(null), document.getElementById('example'));

License

Copyright © 2014 myfreeweb This work is free. You can redistribute it and/or modify it under the terms of the Do What The Fuck You Want To Public License, Version 2, as published by Sam Hocevar. See the COPYING file for more details.