ReactJS: Simple List

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

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: Shadow Parallax

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

See the Pen Shadow Parallax • Reactjs by daryl (@darylw) on CodePen.0

class App extends React.Component {

	constructor(props) {
		super(props);
		this.state = {
			pos: {x: 0, y: 0},
			shadow: true,
		    colors: [
			{
		        "background": "#2A2C39",
		        "text": "#ffffff",
		        "bold": "#FF4056"
		    }, {
		        "background": "#FCF751",
		        "text": "#2A2C39",
		        "bold": "#14151c"
		    }],
		    background: null,
		    text: null,
		    bold: null
		};
	}

	componentDidMount(){
		this.RandomBackground();
	}

    onMouseMove(e) {
        this.setState({
        	pos: {
        		x: e.pageX,
        		y: e.pageY
        	}
        });

        this.CreateShadow();
    }

	CreateShadow() {
	
	    if ('ontouchstart' in window == false && this.state.shadow) {

	            let [moveX, moveY] = [(this.state.pos.x / -100), (this.state.pos.y / -120)];

	            let [Section, firstWord, secondWord] = [React.findDOMNode(this.refs.section), React.findDOMNode(this.refs.playword_1), React.findDOMNode(this.refs.playword_2)];

				firstWord.style.transform = `translate3d(${moveX / 2}px, ${moveY}px, 0)`;
				secondWord.style.transform = `translate3d(${moveX / 2}px, ${moveY}px, 0)`;
				Section.style.textShadow = `${moveX}px ${-moveY}px rgba(0, 0, 0, 0.1)`;

		}
	}

	RandomBackground(){
		let getRandomInt = (min, max) => {
			return Math.floor(Math.random() * (max - min + 1) + min);
		}

		let RandomID 	= getRandomInt(0, 1),
			SelectColor = this.state.colors[RandomID];

		console.log(RandomID);

		this.setState({
			background: this.state.colors[RandomID].background,
			text: this.state.colors[RandomID].text,
			bold: this.state.colors[RandomID].bold
		})
	}

	render() {
		let sectionStyle = {
			backgroundColor: this.state.background,
			color: this.state.text
		}
		let boldStyle = {
			color: this.state.bold
		}

		return <section id="app" onMouseMove={this.onMouseMove.bind(this)} style={sectionStyle}>
				<h1 className="middle" ref="section">
					Movement is <span className="bold" ref="playword_1" style={boldStyle}>here</span>.
					<br/>
					And it is here to <span className="bold" ref="playword_2" style={boldStyle}>stay</span>.
				</h1>
			</section>
	}
}

React.render(<App />,
	document.querySelector('body')
);

ReactJS: Counter

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

See the Pen React JS counter by daryl (@darylw) on CodePen.0

var Counter = React.createClass({
  incrementCount: function(){
    this.setState({
      count: this.state.count + 1
    });
  },
  decrementCount: function(){
    this.setState({
      count: this.state.count - 1
    });
  },
  getInitialState: function(){
     return {
       count: 0
     }
  },
  render: function(){
    return (
      <div className="counter">
        <h1>{this.state.count}</h1>
        <button className="btn" onClick={this.incrementCount}>Increment</button>
        <button className="btn" onClick={this.decrementCount}>Decrement</button>
      </div>
    );
  }
});

React.render(
<Counter />,
  document.body
);

ReactJS: Hide and show products

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

https://codepen.io/gaearon/pen/LzWZvb

class ProductCategoryRow extends React.Component {
  render() {
    const category = this.props.category;
    return (
      <tr>
        <th colSpan="2">
          {category}
        </th>
      </tr>
    );
  }
}

class ProductRow extends React.Component {
  render() {
    const product = this.props.product;
    const name = product.stocked ?
      product.name :
      <span style={{color: 'red'}}>
        {product.name}
      </span>;

    return (
      <tr>
        <td>{name}</td>
        <td>{product.price}</td>
      </tr>
    );
  }
}

class ProductTable extends React.Component {
  render() {
    const filterText = this.props.filterText;
    const inStockOnly = this.props.inStockOnly;

    const rows = [];
    let lastCategory = null;

    this.props.products.forEach((product) => {
      if (product.name.indexOf(filterText) === -1) {
        return;
      }
      if (inStockOnly && !product.stocked) {
        return;
      }
      if (product.category !== lastCategory) {
        rows.push(
          <ProductCategoryRow
            category={product.category}
            key={product.category} />
        );
      }
      rows.push(
        <ProductRow
          product={product}
          key={product.name}
        />
      );
      lastCategory = product.category;
    });

    return (
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Price</th>
          </tr>
        </thead>
        <tbody>{rows}</tbody>
      </table>
    );
  }
}

class SearchBar extends React.Component {
  constructor(props) {
    super(props);
    this.handleFilterTextChange = this.handleFilterTextChange.bind(this);
    this.handleInStockChange = this.handleInStockChange.bind(this);
  }
  
  handleFilterTextChange(e) {
    this.props.onFilterTextChange(e.target.value);
  }
  
  handleInStockChange(e) {
    this.props.onInStockChange(e.target.checked);
  }
  
  render() {
    return (
      <form>
        <input
          type="text"
          placeholder="Search..."
          value={this.props.filterText}
          onChange={this.handleFilterTextChange}
        />
        <p>
          <input
            type="checkbox"
            checked={this.props.inStockOnly}
            onChange={this.handleInStockChange}
          />
          {' '}
          Only show products in stock
        </p>
      </form>
    );
  }
}

class FilterableProductTable extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      filterText: '',
      inStockOnly: false
    };
    
    this.handleFilterTextChange = this.handleFilterTextChange.bind(this);
    this.handleInStockChange = this.handleInStockChange.bind(this);
  }

  handleFilterTextChange(filterText) {
    this.setState({
      filterText: filterText
    });
  }
  
  handleInStockChange(inStockOnly) {
    this.setState({
      inStockOnly: inStockOnly
    })
  }

  render() {
    return (
      <div>
        <SearchBar
          filterText={this.state.filterText}
          inStockOnly={this.state.inStockOnly}
          onFilterTextChange={this.handleFilterTextChange}
          onInStockChange={this.handleInStockChange}
        />
        <ProductTable
          products={this.props.products}
          filterText={this.state.filterText}
          inStockOnly={this.state.inStockOnly}
        />
      </div>
    );
  }
}


const PRODUCTS = [
  {category: 'Sporting Goods', price: '$49.99', stocked: true, name: 'Football'},
  {category: 'Sporting Goods', price: '$9.99', stocked: true, name: 'Baseball'},
  {category: 'Sporting Goods', price: '$29.99', stocked: false, name: 'Basketball'},
  {category: 'Electronics', price: '$99.99', stocked: true, name: 'iPod Touch'},
  {category: 'Electronics', price: '$399.99', stocked: false, name: 'iPhone 5'},
  {category: 'Electronics', price: '$199.99', stocked: true, name: 'Nexus 7'}
];

ReactDOM.render(
  <FilterableProductTable products={PRODUCTS} />,
  document.getElementById('container')
);

ReactJS: Flickering checkbox

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

https://codepen.io/gaearon/pen/PJKEGp

class FlickeringCheckbox extends React.Component {
  constructor(){
    super();
    this.state = { isIndeterminate: true };
  }
  componentDidMount() {
    setInterval(() => this.setState({isIndeterminate: !this.state.isIndeterminate}), 500);
  }
  render() {
    return <input 
      type="checkbox"
      ref={elem => elem && (elem.indeterminate = this.state.isIndeterminate)}
    />

  }
}

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