Skip to content

Instantly share code, notes, and snippets.

View cellog's full-sized avatar

Gregory Beaver cellog

View GitHub Profile
@cellog
cellog / editablelabel.js
Created September 30, 2010 03:56
[qx] demo of editable label
/* ************************************************************************
qooxdoo - the new era of web development
http://qooxdoo.org
Copyright:
2010, Gregory Beaver
License:
@cellog
cellog / webpack.config.js
Created June 16, 2016 03:15
Karma webpack plugin configuration
const stuff = {
output: {
pathinfo: true
},
module: {
loaders: [
{ test: /\.js/, loader: 'babel-loader', exclude: /node_modules/ },
]
@cellog
cellog / karma.conf.js
Last active June 16, 2016 03:23
Setting up karma for development and saucelabs
/* eslint no-var: 0, babel/object-shorthand: 0, vars-on-top: 0 */
require('babel-register')
var sauceBrowsers = require('./test/saucebrowsers.js')
var ieBrowsers = require('./test/onlyie.js')
var iosBrowsers = require('./test/onlyios.js')
var isCI = process.env.CONTINUOUS_INTEGRATION === 'true'
var reporters = ['mocha', 'saucelabs']
var browsers = process.env.ONLYIE ? ieBrowsers : sauceBrowsers
var browserKeys = Object.keys(browsers)
@cellog
cellog / karma.common.conf.js
Created June 16, 2016 03:44
Nirvana achieved
/* eslint no-var: 0, babel/object-shorthand: 0, vars-on-top: 0 */
require('babel-register')
var isCI = process.env.CONTINUOUS_INTEGRATION === 'true'
var reporters = ['mocha', 'saucelabs']
var singleRun = true
var sauceParams = {
testName: "react-selection-hoc unit tests",
username: process.env.SAUCEUSER,
@cellog
cellog / routes.jsx
Created January 14, 2017 06:37
declarative routes with react-router
import Router from 'react-router'
import Route from 'react-router'
// import the components
import App from './App'
import Dashboard from './Dashboard'
import About from './About'
import Inbox from './Inbox'
import Message from './Message'
// example from https://github.com/ReactTraining/react-router/blob/master/docs/guides/RouteConfiguration.md
@cellog
cellog / RouterComponent.js
Last active January 14, 2017 07:23
accessing react-router props in a redux connected component
import { connect } from 'react-redux'
import Component from './Component'
import * as actions from './actions'
function mapStateToProps(state, props) {
return {
year => props.year || state.year
}
}
@cellog
cellog / Component.jsx
Created January 14, 2017 07:51
conditional rendering based on data
import Camper from './Camper'
export default ({ year, ...otherData }) => {
return (
<div>
{ otherData.year === year ? <Camper {...otherData} /> : null }
</div>
)
}
@cellog
cellog / RenderIfRoute.js
Created January 14, 2017 07:58
a simple conditional rendering higher order component
import React from 'react'
import { connect } from 'react-redux'
export default isActive => ({ component, ...props }) => {
const Component = component
const NullComponent = ({ '@@__isActive': active, ...props }) => (
active ? <Component {...props} /> : null
)
const R = connect((state, props) => {
@cellog
cellog / Inbox.js
Created January 14, 2017 08:02
react-router with nested routes
import React, { Component } from 'react'
export default class Inbox extends Component {
render() {
return (
<div>
<h2>Inbox</h2>
{this.props.children || "Welcome to your Inbox"}
</div>
)
@cellog
cellog / Inbox.js
Created January 14, 2017 08:10
New system
import React, { Component } from 'react'
import RenderIfRoute from './RenderIfRoute'
import Message from './Message'
export default class Inbox extends Component {
render() {
return (
<div>
<h2>Inbox</h2>
<RenderIfRoute isActive={state => state.routing.activeRoute === 'message'} component={Message} />