New approach using instance methods show & hide.

components/snackbar/index.js

@@ -8,51 +8,66 @@ export default React.createClass({
   displayName: 'Slider',
 
   propTypes: {
-    action: React.PropTypes.object,
+    action: React.PropTypes.string,
-    active: React.PropTypes.bool,
-    label: React.PropTypes.string,
-    className: React.PropTypes.string,
     icon: React.PropTypes.string,
+    label: React.PropTypes.string,
+    onClick: React.PropTypes.func,
     timeout: React.PropTypes.number,
     type: React.PropTypes.string
   },
 
-  getDefaultProps () {
-    return {
-      active: false,
-      className: '',
-      timeout: 10
-    };
-  },
-
   getInitialState () {
     return {
-      active: this.props.active
+      active: false
     };
   },
 
-  componentDidMount () {
+  handleClick (event) {
-    setTimeout(() => {
+    this.setState({active: false});
-      this.setState({ active: false });
+    if (this.props.onClick) {
-    }, this.props.timeout * 1000)
+      this.props.onClick(event, this);
+    }
   },
 
-  componentWillReceiveProps (next_props) {
+  renderButton () {
-    this.setState({active: next_props.active});
+    if (this.props.action) {
+      return (
+        <Button
+          label={this.props.action}
+          type='flat'
+          className={style.button}
+          onClick={this.handleClick}
+        />
+      );
+    }
   },
 
   render () {
     let className = `${style.root} ${style[this.props.type]}`;
-    if (this.props.active) className += ` ${style.active}`;
+    if (this.state.active) className += ` ${style.active}`;
     if (this.props.className) className += ` ${this.props.className}`;
 
     return (
       <div data-react-toolbox='snackbar' className={className}>
         { this.props.icon ? <FontIcon value={this.props.icon} className={style.icon} /> : null }
         <span className={style.label}>{this.props.label}</span>
-        { this.props.action ? <Button {...this.props.action} type='flat' className={style.button} /> : null }
+        { this.renderButton() }
       </div>
     );
+  },
+
+  // -- Extends
+  hide () {
+    this.setState({active: false});
+  },
+
+  show () {
+    this.setState({active: true});
+    if (this.props.timeout) {
+      setTimeout(() => {
+        this.setState({ active: false });
+      }, this.props.timeout * 1000);
+    }
   }
 
 });

spec/components/snackbar.jsx

@@ -4,22 +4,14 @@ import Snackbar from '../../components/snackbar';
 
 export default React.createClass({
 
-  displayName: 'ButtonTest',
+  displayName: 'SnackbarTest',
 
-  getInitialState () {
+  handleClick (event, snackbar) {
-    return {
+    console.log('handleClick', event, snackbar);
-      snackbar: false,
-      toast: false
-    };
-  },
-
-  handleClick (event) {
-    console.log('handleClick', event);
-    this.setState({ active: false });
   },
 
   handleSnackbar () {
-    this.setState({ active: true });
+    this.refs.snackbar.show();
   },
 
   render () {
@@ -29,10 +21,11 @@ export default React.createClass({
         <p>lorem ipsum...</p>
         <Button label='Show snackbar' onClick={this.handleSnackbar} type='raised' />
         <Snackbar
-          action={{label: 'Push', onClick: this.handleClick}}
+          ref='snackbar'
-          active={this.state.active}
+          action='Dismiss'
           icon='question-answer'
           label='Snackbar action cancel'
+          onClick={this.handleClick}
           type='cancel'
         />
       </section>