Filmstrip React component

filmstrip.css

.filmstrip{
	padding: 0;
	margin: 10px;
	display: flex;
}

.navButton{ 
	border: 0;
	margin: 0;
	height: 100%;
}

.viewport{ 
	overflow-x: hidden; 
	position: relative;
	width: 100%;
}

.strip{ 
	position: absolute;
	top: 0;
	left: 0;
	white-space: nowrap; 
	display: flex;

	-webkit-transition-property: left;
	transition-property: left;
	transition-duration: 0.4s;
	transition-timing-function: ease;
}

.viewport::before{
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	bottom: 0;
	margin: 0;
	padding: 0;
	width: 100%;
	background: linear-gradient(to right, 
		rgba(255,255,255,1) 10%,
		rgba(255,255,255,0) 30%
	);
	background-repeat: no-repeat;
	background-attachment: fixed;
	content: '';
}

.viewport::after{
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	bottom: 0;
	margin: 0;
	padding: 0;
	width: 100%;
	background: linear-gradient(to right, 
		rgba(255,255,255,0) 70%,
		rgba(255,255,255,1) 90%
	);
	background-repeat: no-repeat;
	background-attachment: fixed;
	content: '';
}
/* styles below this point are for the example only, no need to keep */

.navButton{
	background-color: white; 
	width: 40px;
	color: #ccc;
	font-weight: bold;
	font-size: 24pt;
}

.strip-item{ 
	background-color: #bbb;
	height: 100px; 
	margin: 0;
	width: 100px;
	color: white;
	text-align: center;
	line-height: 100px;
	font-size: 48pt;
	font-family: Avenir;
	font-weight: bold;
}

.strip-item:nth-child(even){
	background-color: #ccc;
}

filmstrip.jsx

import React from 'react';
require('filmstrip.css'); 

export default class Filmstrip extends React.Component{

	constructor(props){
		super(props)
		this.state = { scrollPos: 0 }
		this.increment = parseInt(this.props.increment, 10)
	}

	adjustPos(increment){
		this.innerwidth = this.refs.strip.getBoundingClientRect().width
		this.viewportwidth = this.refs.viewport.getBoundingClientRect().width

		var newPos = this.state.scrollPos + increment;
		var offset = this.viewportwidth - this.innerwidth

		if(increment > 0)
			newPos = Math.min(newPos,0)

		if(increment < 0)
			newPos = Math.max(newPos, offset)

		this.setState({scrollPos: newPos})
	}

	componentDidMount(){
		this.refs.filmstrip.style.height = this.refs.strip.getBoundingClientRect().height + 'px'
	}

	render(){
		return <section className='filmstrip' ref='filmstrip'>
			<button className='prevNav navButton' onClick={this.adjustPos.bind(this,this.increment)}>&lt;</button>
			<div className='viewport' ref='viewport'>
				<div className='strip' ref='strip' style={{left: this.state.scrollPos}}>
					<div className='strip-item'>1</div>
					<div className='strip-item'>2</div>
					<div className='strip-item'>3</div>
					<div className='strip-item'>4</div>
					<div className='strip-item'>5</div>
					<div className='strip-item'>6</div>
					<div className='strip-item'>7</div>
					<div className='strip-item'>8</div>
					<div className='strip-item'>9</div>
					<div className='strip-item'>10</div>
					<div className='strip-item'>11</div>
					<div className='strip-item'>12</div>
				</div>
			</div>
			<button className='nextNav navButton' onClick={this.adjustPos.bind(this,-this.increment)}>&gt;</button>
		</section>
	}
}

sample.html

<Filmstrip increment="350"/>