React breakpoints mixin

breakpoint-mixin.coffee

Style = require '../styles/props'
_ = require 'lodash'

module.exports =
	_setScreenWidth: ->
		if @isMounted() then @setState {screenWidth: window.innerWidth}

	getInitialState: -> screenWidth: window?.innerWidth or 1280

	screenWidth: (minName, maxName) ->
		maxIndex = 1 + _.findIndex Style.breakpoints, name: (maxName or minName)
		max = Style.breakpoints[maxIndex] or value: Infinity
		min = _.find Style.breakpoints, name: minName
		(@state.screenWidth >= min.value) and (@state.screenWidth < max.value)

	componentWilllUnmount: ->
		window.removeEventListener 'resize', @debouncedSetScreenWidth

	componentDidMount: ->
		@debouncedSetScreenWidth = _.debounce @_setScreenWidth, 300
		window.addEventListener 'resize', @debouncedSetScreenWidth

component.coffee

#Example usage

SidebarSmall = React.createFactory require './sidebar-small'
SidebarMedium = React.createFactory require './sidebar-medium'
Breakpoints = require '../mixins/breakpoint-mixin'

{ section } = require 'react-coffee-elements'

module.exports = React.createClass

	displayName: 'Sidebar'

	mixins: [Breakpoints]

	render: ->
		if @screenWidth 'xs', 's'
			SidebarSmall {}, @props.children
		else if @screenWidth 'm'
			SidebarMedium {}, @props.children
		else
			section {className: 'sidebar'}, @props.children

props.js

// Generated by Theo

module.exports = {
	"breakpoints": [
		{"name":"xs","value":0},
		{"name":"s","value":550},
		{"name":"m","value":850},
		{"name":"l","value":1200},
		{"name":"xl","value":1650}
	],
}