Tanner Linsley tannerlinsley

## counterState.js
import { State } from 'jumpsuit'

const reducer = State({
  // Initial State
  initial: { count: 0 },
  // Actions
  increment (state, payload) {
    return { count: state.count + 1 }
  },
  decrement (state, payload) {

## asyncIncrement.js
import { Effect, Actions } from 'jumpsuit'

Effect('asyncIncrement', (time = 1000) => {
  setTimeout(() => Actions.increment(), time)
})

## count10hook.js
import { Hook, Actions } from 'jumpsuit'

Hook((action, getState) => {
  // Never letting the counter equal 10!
  if (getState().counter.count === 10) {
    Math.random() > 0.5 ? Actions.increment() : Actions.decrement()
  }
})

## app.js
// Import Jumpsuit
import { Render, State, Effect, Hook, Actions, Component } from 'jumpsuit'


// Create a state with some actions
const CounterState = State({

  // Initial State
  initial: { count: 0 },

## app.js
// Javascript
import { Render, Router, Route, Redirect, IndexRoute, IndexRedirect } from 'jumpsuit'

Render(state, (
  <Router>
    <Route path='/' component={Layout}>
      <IndexRoute component={Teams} />
      <Route path='me' component={Me} />
      <Route path='workspaces' component={Workspaces} />
      <Route path='invite' component={WorkspaceInvite} />

## jumpsuit-react-form.js
import { State } from 'jumpsuit'
import _ from 'lodash'
import {FormDefaultProps} from 'react-form'

const formState = State('react-form', {
  initial: {},
  set (state, form) {
    return {
      ...state,
      [form.id]: form

## react-chart-brainstorm.js
Solutions
  Modules
    Components
      Primitives
        <Path />
        <Arc />
        <Arc />

Responsive (Take up 100% of parent all the time)
State => Visualization

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */

.bar { fill: steelblue; }

</style>
<body>

<!-- load the d3.js library -->

## RouteTransition.jsx
import React, { PropTypes } from 'react'
import { Transition } from 'react-move'

const RouteTransition = React.createClass({
  propTypes: {
    pathname: PropTypes.string.isRequired
  },

  render() {
    return (

## .block
license: gpl-3.0
	import { State } from 'jumpsuit'

	const reducer = State({
	// Initial State
	initial: { count: 0 },
	// Actions
	increment (state, payload) {
	return { count: state.count + 1 }
	},
	decrement (state, payload) {
	import { Effect, Actions } from 'jumpsuit'

	Effect('asyncIncrement', (time = 1000) => {
	setTimeout(() => Actions.increment(), time)
	})
	import { Hook, Actions } from 'jumpsuit'

	Hook((action, getState) => {
	// Never letting the counter equal 10!
	if (getState().counter.count === 10) {
	Math.random() > 0.5 ? Actions.increment() : Actions.decrement()
	}
	})
	// Import Jumpsuit
	import { Render, State, Effect, Hook, Actions, Component } from 'jumpsuit'


	// Create a state with some actions
	const CounterState = State({

	// Initial State
	initial: { count: 0 },
	// Javascript
	import { Render, Router, Route, Redirect, IndexRoute, IndexRedirect } from 'jumpsuit'

	Render(state, (
	<Router>
	<Route path='/' component={Layout}>
	<IndexRoute component={Teams} />
	<Route path='me' component={Me} />
	<Route path='workspaces' component={Workspaces} />
	<Route path='invite' component={WorkspaceInvite} />
	import { State } from 'jumpsuit'
	import _ from 'lodash'
	import {FormDefaultProps} from 'react-form'

	const formState = State('react-form', {
	initial: {},
	set (state, form) {
	return {
	...state,
	[form.id]: form
	Solutions
	Modules
	Components
	Primitives
	<Path />
	<Arc />
	<Arc />

	Responsive (Take up 100% of parent all the time)
	State => Visualization
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style> /* set the CSS */

	.bar { fill: steelblue; }

	</style>
	<body>

	<!-- load the d3.js library -->
	import React, { PropTypes } from 'react'
	import { Transition } from 'react-move'

	const RouteTransition = React.createClass({
	propTypes: {
	pathname: PropTypes.string.isRequired
	},

	render() {
	return (