Blog post about salesforce design system + react 6

notification_4.js

var Notification = React.createClass({

  render: function() {
    var theme = this.props.theme || 'info';
    var themeClass = 'slds-theme--' + theme;
    var className = "slds-notify slds-notify-alert " + themeClass;

    return (
      <div className="slds-notify-container">
        <div className={className} role="alert">
          <span className="slds-assistive-text">{theme}</span>
          <button className="slds-button close slds-icon--small">
            <svg aria-hidden="true" className="slds-button__icon slds-button__icon--inverse" dangerouslySetInnerHTML={{__html:'<use xlink:href="/assets/icons/action-sprite/svg/symbols.svg#close"></use>'}}>
            </svg>
            <span className="slds-assistive-text">Close</span>
          </button>
          {this.props.children}
        </div>
      </div>
    );
  }
});

Notification.propTypes = {theme: React.PropTypes.oneOf(['success', 'warn', 'error', 'info'])};
module.exports = Notification;