Skip to content

Instantly share code, notes, and snippets.

@jondavidjohn
Last active August 29, 2015 14:10
Show Gist options
  • Save jondavidjohn/459a0150ccbb47432b15 to your computer and use it in GitHub Desktop.
Save jondavidjohn/459a0150ccbb47432b15 to your computer and use it in GitHub Desktop.
React CSS (assumes browserify)
/** @jsx React.DOM */
var React = require('react'),
Toggle = require('./components/Toggle');
var App = React.createClass({
toggleChanged: function(newState) {
alert('toggle changed to ' + (newState ? 'on' : 'off'));
},
render: function() {
return (
<div>
<Toggle initAsOn={false} onChange={this.toggleChanged} />
</div>
);
}
});
React.render(<App/>, document.getElementById('appContainer'));
/** @jsx React.DOM */
var React = require('react'),
extend = require('lodash.assign'),
Styleable = require('../mixins/styleable.js');
module.exports = React.createClass(
extend( Styleable, {
propTypes: {
initAsOn: React.PropTypes.bool,
onChange: React.PropTypes.func
},
getDefaultProps: function() {
return {
initAsOn: false,
onChange: function() {}
};
},
getInitialState: function() {
return { on: this.props.initAsOn };
},
doToggle: function(e) {
var on = e.target.dataset.state === 'on';
if (on !== this.state.on) this.props.onChange(on);
this.setState({on: on});
},
render: function() {
var s = this.mergeStyles,
st = this.state;
return (
<ul style={s('container')}>
<li
style={s('button', st.on && 'active')}
data-state='on'
onClick={this.doToggle}>On</li>
<li
style={s('button', !st.on && 'active')}
data-state='off'
onClick={this.doToggle}>Off</li>
</ul>
);
},
getStyles: function() {
return {
container: {
padding: 10,
backgroundColor: 'red',
listStyle: 'none',
width: 100
},
button: {
backgroundColor: 'white',
color: 'green',
display: 'inline-block',
padding: 10,
width: 30
},
active: {
backgroundColor: 'green',
color: 'white'
}
};
}
})
);
var extend = require('lodash.assign');
module.exports = {
mergeStyles: function() {
var results = {},
styles = this.getStyles();
[].slice.call(arguments).forEach(function(arg) {
if (!arg) return;
if (!styles || !styles[arg]) return;
results = extend(results, styles[arg]);
});
return results;
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment