/react-kup

react-kup is a simple, nonintrusive alternative to JSX for coffeescript

Primary LanguageCoffeeScriptMIT LicenseMIT

react-kup

NPM Package Build Status Sauce Test Status codecov.io Dependencies

react-kup is a simple, nonintrusive alternative to JSX for coffeescript

the newest version 0.5 introduces breaking changes !
see the changelog

  • use all coffeescript features naturally when building a react component's virtual-DOM in render
  • tiny single file with just under 100 lines of simple, readable, maintainable code
  • huge test suite passing Build Status with codecov.io code coverage
  • continously tested in Node.js (0.12, 4.0), io.js (2, 3) and all relevant browsers: Sauce Test Status
  • supports CommonJS, AMD and browser globals
  • used in production
  • npm package: npm install react-kup
  • bower package: bower install react-kup
  • no additional build step required
  • no react mixin
  • same concept as kup (kup is an html builder for nodejs) but builds up nested react elements instead of html strings.
  • supports all tags supported by react
npm install react-kup

bower install react-kup

> var reactKup = require('react-kup');

lib/react-kup.js supports AMD.
sets the global variable reactKup when neither CommonJS nor AMD are available.

TodoList = React.createClass
  render: ->
    that = this
    createItem = (itemText) ->
      reactKup (k) ->
        k.li itemText
    reactKup (k) ->
      k.ul that.props.items.map createItem

TodoApp = React.createClass
  getInitialState: ->
    items: ['Buy Milk', 'Buy Sugar']
    text: 'Add #3'
  onChange: (e) ->
    this.setState({text: e.target.value})
  handleSubmit: (e) ->
    e.preventDefault()
    nextItems = this.state.items.concat([this.state.text])
    nextText = ''
    this.setState({items: nextItems, text: nextText})
  render: ->
    that = this

    reactKup (k) ->
      k.div ->
        k.h3 'TODO'
        k.build TodoList,
          items: that.state.items
        k.form {
          onSubmit: that.handleSubmit
        }, ->
          k.input
            onChange: that.onChange
            value: that.state.text
          k.button "Add ##{that.state.items.length + 1}"

look at the tests for additional examples

contributing

bugfixes, issues and discussion are always welcome.
kindly ask before implementing new features.

i will happily merge pull requests that fix bugs with reasonable code.

i will only merge pull requests that modify/add functionality if the changes align with my goals for this package, are well written, documented and tested.

communicate !
write an issue to start a discussion before writing code that may or may not get merged.

This project adheres to the Contributor Covenant 1.2. By participating, you are expected to uphold this code. Please report unacceptable behavior to kruemaxi@gmail.com.

license: MIT