Blog post about salesforce design system + react 7

notification_5.js

var Notification = function(variant) {
  var comp = React.createClass({
    render: function() {
      var theme = this.props.theme || 'info';
      var themeClass = 'slds-theme--' + theme;
      var className = "slds-notify slds-notify--" + variant + ' ' + themeClass;

      return (
        <div className="slds-notify-container">
          <div className={className} role="alert">
            <span className="slds-assistive-text">{theme}</span>
            <button className="slds-button slds-notify__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>
      );
    }
  });
  comp.propTypes = {theme: React.PropTypes.oneOf(['success', 'warn', 'error', 'info'])};
  return comp;
}

Notification.Alert = Notification('alert');
Notification.Toast = Notification('toast');

module.exports = Notification;