Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script src="https://cdn.rawgit.com/lodash/lodash/3.0.1/lodash.min.js"></script>
<meta name="description" content="react-theme demo: Buttons example">
<script src="http://static.jsbin.com/js/vendor/traceur.js"></script>
<script src="https://code.jquery.com/jquery-compat-git.js"></script>
<script src="//fb.me/react-0.13.3.js"></script>
<script src="https://rawgit.com/azazdeaz/react-theme/lib/browser/react-theme.js"></script>
<script>root=window//hack for webpack</script>
<script src="https://cdn.rawgit.com/FormidableLabs/radium/master/dist/radium.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinycolor/1.1.2/tinycolor.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="mount-point"></div>
</body>
</html>
 
var theme = new ReactTheme()
​
theme.setSource('font', () => ({
  fontSize: '14px',
  fontWeight: '400',
  fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif'
}))
​
theme.setSource('button', () => {
  var activeShadow = 'inset 0 3px 5px rgba(0,0,0,.125)'
  
  return {
    mixins: ['font'],
    
    display: 'inline-block',
    padding: '6px 12px',
    lineHeight: '1.42857143',
    textAlign: 'center',
    whiteSpace: 'nowrap',
    verticalAlign: 'middle',
    cursor: 'pointer',
    userSelect: 'none',
    borderWidth: 1,
    borderStyle: 'solid',
    borderColor: 'transparent',
    borderRadius: '4px',
    
    kind: {
      'default': {
        color: '#333',
        backgroundColor: '#fff',
        borderColor: '#ccc',
        ':hover': {
          borderColor: '#adadad',
        },
        ':active': {
          backgroundColor: '#d4d4d4',
          borderColor: '#8c8c8c',
          boxShadow: activeShadow,
        }
      },
      primary: {
        color: '#fff',
        backgroundColor: '#337ab7',
        borderColor: '#2e6da4',
        ':hover': {
          backgroundColor: '#286090',
          borderColor: '#204d74',
        },
        ':active': {
          backgroundColor: '#204d74',
          borderColor: '#122b40',
          boxShadow: activeShadow,
        }
      }
    }
  }
})
​
@Radium
class Button extends React.Component {
  static contextTypes = {
    theme: React.PropTypes.object.isRequired
  }
  render() {
    var {label, mod, style} = this.props
    mod = _.assign({kind: 'default'}, mod)
    var {theme} = this.context
    var style = theme.getStyle('button', mod, style)
    return <div style={style}>{label}</div>
  }
}
​
class App extends React.Component {
  static childContextTypes = {
    theme: React.PropTypes.object.isRequired
  }
  getChildContext() {
    return {theme}
  }
  render() {
    return <div>
      <Button label='Default'/>
      <Button label='Primary' mod={{kind: 'primary'}}/>
      <Button label='Styled' style={{transform: 'rotate(42deg)'}}/>
    </div>
  }
}
​
React.render(<App/>, document.querySelector('#mount-point'))
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
azazdeazpro
0viewers