ReactJS: Checkbox

This entry is part 26 of 35 in the series React JS

See the Pen Stateful React checkbox component by daryl (@darylw) on CodePen.0

/**
* www.devhamsters.com
*/

class Checkbox extends React.Component {
  static propTypes = {
    checked: React.PropTypes.bool,
    disabled: React.PropTypes.bool,
  };
  static defaultProps = {
    checked: false,
    disabled: false,
  };
  constructor(props) {
    super(props);
    this.state = {
      checked: props.checked,
    };
  };

  _handleChange = () => {
    this.setState({
      checked: !this.state.checked,
    });
  };

  render() {
    const { disabled } = this.props;
    const { checked } = this.state;
    return (
      <div className="React__checkbox">
        <label>
          <input 
            type="checkbox"
            className="React__checkbox--input"
            checked={checked}
            disabled={disabled}
            onChange={this._handleChange}
          />
          <span 
            className="React__checkbox--span"
          />
        </label>
      </div>
    );
  }
}

const App = (
  <div className="App">
    <Checkbox />
    <Checkbox checked />
    <Checkbox disabled />
    <Checkbox checked disabled />
  </div>
);
      
ReactDOM.render(
  App, 
  document.getElementById('app')
);

ReactJS: Circle

This entry is part 25 of 35 in the series React JS

See the Pen React: Circle by Pete (@peterbenoit) on CodePen.0

var Circle = React.createClass({

  styler: {
    width: "100px",
    height: "100px",
    mozBorderRadius: "50%",
    webkitBorderRadius: "50%",
    borderRadius: "50%",
    background: "red"
  },

  render: function() {
    return (
      <div style = {this.styler}></div>
    );
  }
});
 
React.render(
  <Circle />, 
  document.getElementById('mount-point'));

ReactJS: Button

This entry is part 24 of 35 in the series React JS

See the Pen React Button by Trenton (@trentontri) on CodePen.0

/*
 * A simple React component
 * Properties include: href, icon, disabled, and className
 */
class Button extends React.Component {

  render() {
    const { children, className, href, icon, ...others } = this.props;
    const props = { ...others, href, className, ref: 'button', disabled: this.props.disabled };
    const element = href ? 'a' : 'button';

    return React.createElement(
      element, props, icon ? <i className={this.props.icon} /> : null, children
    );
  }
}

/*
 * Render the above component into the div#react-button
 */
ReactDOM.render(
  <div>
    <Button className="btn-primary">click me</Button>
    <Button className="btn-success" icon="fa fa-phone">success </Button>
    <Button className="btn-success" disabled={true}>disabled </Button>
  </div>, 
  document.getElementById('react-button')
);

ReactJS: TextField

This entry is part 23 of 35 in the series React JS

See the Pen React – TextField by daryl (@darylw) on CodePen.0

class MyApp extends React.Component {
  render() {
    return (
      <TextField 
        placeholder="Enter your name"
      />
    );
  }
};

class TextField extends React.Component {
  constructor (props) {
    super(props);
  }
  
  render () {
    return (
      <input
        onChange={this.handleKeyPress}
        type="text"
        placeholder={ this.props.placeholder } 
        value=""
      />
    );
  }
};

React.render(<MyApp/>, document.querySelector('#myapp'));

ReactJS: Preview Image

This entry is part 22 of 35 in the series React JS

See the Pen React Image Preview & Upload by Brian Emil Hartz (@hartzis) on CodePen.0

class ImageUpload extends React.Component {
  constructor(props) {
    super(props);
    this.state = {file: '',imagePreviewUrl: ''};
  }

  _handleSubmit(e) {
    e.preventDefault();
    // TODO: do something with -> this.state.file
    console.log('handle uploading-', this.state.file);
  }

  _handleImageChange(e) {
    e.preventDefault();

    let reader = new FileReader();
    let file = e.target.files[0];

    reader.onloadend = () => {
      this.setState({
        file: file,
        imagePreviewUrl: reader.result
      });
    }

    reader.readAsDataURL(file)
  }

  render() {
    let {imagePreviewUrl} = this.state;
    let $imagePreview = null;
    if (imagePreviewUrl) {
      $imagePreview = (<img src={imagePreviewUrl} />);
    } else {
      $imagePreview = (<div className="previewText">Please select an Image for Preview</div>);
    }

    return (
      <div className="previewComponent">
        <form onSubmit={(e)=>this._handleSubmit(e)}>
          <input className="fileInput" 
            type="file" 
            onChange={(e)=>this._handleImageChange(e)} />
          <button className="submitButton" 
            type="submit" 
            onClick={(e)=>this._handleSubmit(e)}>Upload Image</button>
        </form>
        <div className="imgPreview">
          {$imagePreview}
        </div>
      </div>
    )
  }
}
  
ReactDOM.render(<ImageUpload/>, document.getElementById("mainApp"));