React Tweetbox

index.html

<div id="container"></div>

React Tweetbox.markdown

React Tweetbox

A beginners React component for a twitter tweetbox. Handles logic for adding photos, character counts, and overflow alert.

A Pen by C-Rodg on CodePen.

License.

script.js

var TweetBox = React.createClass({
  getInitialState: function(){
    return {
      text: "",
      photoAdded : false
    };
  },
  handleChange: function(event){
    this.setState({text : event.target.value});
  },
  togglePhoto : function(event){
   this.setState({photoAdded: !this.state.photoAdded});
  },
  remainingChars : function() {
    if (this.state.photoAdded) {
      return 140- 23 - this.state.text.length;
    } else {
    return 140 - this.state.text.length;
    }
  }, 
  overflowAlert(){
    if(this.remainingChars() < 0){
      if(this.state.photoAdded){
        var beforeOverflow = this.state.text.substring(140-23-10, 140);
        var overflowText = this.state.text.substring(140-23);
      } else {
        var beforeOverflow = this.state.text.substring(140-10, 140);
        var overflowText = this.state.text.substring(140);
      }
      
      return (
        <div className="alert alert-warning">
        <strong>Oops! Too Long:</strong>
        &nbsp;...{beforeOverflow}
        <strong className="bg-danger">{overflowText}</strong>
        </div>
      )
    } else {
      return "";
    }
  },
  render: function() {
  return (
    <div className="well clearfix">
    { this.overflowAlert() }
    <textarea className="form-control" onChange={this.handleChange}></textarea>
    <br />
    Chars Left: {this.remainingChars()}
    <button className="btn btn-primary pull-right" disabled={this.remainingChars() === 140 }>Send</button>
    <button className="m-r-10 btn btn-default pull-right" onClick={this.togglePhoto}>{this.state.photoAdded ? "Photo Added" : "Add Photo"}</button>
    </div>
  );
  }
});

React.render(
  <TweetBox />,
  document.getElementById("container")
);

scripts

<script src="http://codepen.io/chriscoyier/pen/yIgqi.js"></script>
<script src="http://fb.me/react-0.12.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.0.js"></script>

style.css

body {
  min-height: 100%;
  min-width: 100%;
    background: #fff9f9; /* Old browsers */
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b0b0b0+0,fff9f9+100 */
background: #b0b0b0; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  #b0b0b0 0%, #fff9f9 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover,  #b0b0b0 0%,#fff9f9 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center,  #b0b0b0 0%,#fff9f9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b0b0b0', endColorstr='#fff9f9',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

#container {
  max-width: 500px;
  margin: 30px auto
}

.m-r-10 {
  margin-right: 10px;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />