import { injectProps } from 'relpers';
 
class Profile extends React.Component {
  @injectProps
  render({ firstName, lastName, email }) {
    return <p>{ firstName } { lastName } - { email }</p>;
  }
}

import { injectProps } from 'relpers';
 
class Profile extends React.Component {
  @injectProps('state')
  fullName({ firstName, lastName }) {
    return firstName + ' ' + lastName;
  }
 
  render() {
    return <p>{ this.fullName() } - { this.props.email }</p>;
  }
}

import { killEvent } from 'relpers';
 
class App1 extends React.Component {
  @killEvent
  onLinkClick() { alert('Link as been clicked!'); }
 
  render() {
    return (
      <a href="#" onClick={ this.onLinkClick }>
        <span>"Notice that your browser's URL is not being updated with '#' in it."</span>
      </a>
    );
  }
}

import { killEvent } from 'relpers';
 
class App2 extends React.Component {
  render() {
    return (
      <a href="#" onClick={ killEvent(() => alert('Link as been clicked!')) }>
        <span>"Notice that your browser's URL is not being updated with '#' in it."</span>
      </a>
    );
  }
}

import { History } from 'react-router';
import { applyMixin } from 'relpers';
 
@applyMixin(History)
class Link extends React.Component {
  onLinkClick(href) {
    this.history.pushState(null, href);
  }
 
  render() {
    return (
      <button onClick={ () => this.onLinkClick(this.props.href) }>
        { this.props.children }
      </button>
    );
  }
}

import { History } from 'react-router';
 
const Link = React.createClass({
  mixins: [History],
 
  onLinkClick(href) {
    this.history.pushState(null, href);
  },
 
  render() {
    return (
      <button onClick={ () => this.onLinkClick(this.props.href) }>
        { this.props.children }
      </button>
    );
  },
});