ReactJS: Hover over button

See the Pen React hover demo by Smashcat (@naturalclar) on CodePen.

class Icon extends React.Component{
  constructor (props) {
    super(props);
    this.state= {
      hover: false
    };
  }
  
   handleHover() {
    this.setState({hover: !this.state.hover});
  }
  
  render() {
    var iconStyle={
      transform: this.state.hover ? 'translateY(-5px)' : 'none',
      boxShadow: this.state.hover ? '3px 3px 5px #000' : 'none',
      color: this.state.hover? "#fff" : "#aaa",
      background: this.state.hover? '#55acee' :'#222',
      transition: "all .3s",
      borderRadius: '50%',
      height: 50,
      width: 50,
      textAlign:'center',
      lineHeight: '50px'
    }
    return (
      <a href={this.props.href}><i className={this.props.icon} style={iconStyle} onMouseEnter={()=>this.handleHover()} onMouseLeave={()=>this.handleHover()}></i></a>
    )
  };
  
}

class App extends React.Component {
  render() {
    return (
      <Icon href="#" icon="fa fa-2x fa-twitter" />
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

React: Button Dropdown

See the Pen React Dropdown by Tristan W (@tristaaan) on CodePen.

var Dropdown = React.createClass({
  getInitialState() {
    return { toggled: false };
  },
  componentDidUpdate: function(prevState) {
    if (this.state.toggled && !prevState.toggled) {
      window.addEventListener("click", this.handleClickOutside);
    } else if (!this.state.toggled && prevState.toggled) {
      window.removeEventListener("click", this.handleClickOutside);
    }
  },
  handleClickOutside: function(e) {
    var children = this.getDOMNode().getElementsByTagName("*");
    for (var x in children) {
      if (children[x] == e.target) {
        return;
      }
    }
    this.toggle();
  },
  toggle(e) {
    this.setState({ toggled: !this.state.toggled });
  },
  render() {
    var isHidden = !this.state.toggled ? "hidden" : "";
    return (
      <div className="dropdown">
        <button
          ref="dropdownButton"
          className="dropdown-button"
          onClick={this.toggle}
        >
          {this.props.buttonText}
        </button>
        <section
          ref="dropdownContent"
          className={isHidden + " dropdown-content"}
        >
          {this.props.children}
        </section>
      </div>
    );
  }
});

var Main = React.createClass({
  render() {
    return (
      <Dropdown buttonText="hello">
        <p>Goodbye</p>
      </Dropdown>
    );
  }
});

React.render(<Main />, document.getElementById("content"));

ReactJS: Change Color Simple Component

See the Pen React simple component by daryl (@darylw) on CodePen.

var green = '#39D1B4';
var yellow = '#FFD712';

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      color: green
    }
    
    this.changeColor = this.changeColor.bind(this);
  }
  
  changeColor() {
    let newColor = (this.state.color == green ? yellow : green);
    this.setState({ color: newColor });
  }
  
  render() {
    return (
      <div className="btn-block" style={{background: this.state.color}}>
        <h1 >
          Change my color
        </h1>
        <button className="btn" onClick={this.changeColor}>
          Change color
        </button>
      </div>
    );
  }  
}

ReactDOM.render(<Toggle />, document.getElementById('app'));

ReactJS: Simple List

See the Pen React List by sean (@viiiprock) on CodePen.

const List = props => {
  const ComponentToRender = props.component;
  let content = <div />;

  if (props.items) {
    content = props.items.map((item, index) => (
      <ComponentToRender key={`item-${index}`} {...item} />
    ));
  } else {
    content = <ComponentToRender />;
  }

  return <ul>{content}</ul>;
};

const ListItem = props => (
  <li>
    <a href={props.href}>
      <i className={props.icon} />
      {props.name}
    </a>
  </li>
);

const items = [
  { href: "#", icon: "fa fa-phone", name: "bannana" },
  { href: "#", icon: "fa fa-phone", name: "apples" }
];

ReactDOM.render(
  <div>
    <List component={ListItem} items={items} />
  </div>,
  document.getElementById("app")
);

ReactJS: Radio button and show selected

See the Pen React Radio Buttons by Nick Van Dyck (@nickvdyck) on CodePen.

const RadioGroup = ({ name, value, children, onChange, ...rest }) => {
  const checked = typeof onChange === "function" ? "checked" : "defaultChecked";
  return (
    <div onChange={onChange}>
      {children.map(child =>
        React.cloneElement(child, {
          [checked]: child.props.value === value,
          name,
          ...rest
        })
      )}
    </div>
  );
};

const RadioButton = ({ label, value, className, ...rest }) => (
  <label className={className}>
    <input type="radio" value={value} {...rest} />
    {label}
  </label>
);

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selected: "",
      fruits: ["Grape", "Apple"]
    };

    this.resetSelection = this.resetSelection.bind(this);
    this.changeFruit = this.changeFruit.bind(this);
    this.showSelected = this.showSelected.bind(this);
  }

  showSelected() {
    alert(`Current selection: ${this.state.selected || "none"}`);
  }

  changeFruit(event) {
    this.setState({ selected: event.target.value });
  }

  resetSelection() {
    this.setState({ selected: "" });
  }

  render() {
    return (
      <div>
        <RadioGroup
          name="fruit"
          onChange={this.changeFruit}
          value={this.state.selected}
        >
          {this.state.fruits.map(fruit => (
            <RadioButton value={fruit.toLowerCase()} label={fruit} />
          ))}
        </RadioGroup>
        <br />
        <button onClick={this.resetSelection}>Reset Selection</button>
        <button onClick={this.showSelected}> Show Selected </button>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("app"));