Skip to content
react-kup is a simple, nonintrusive alternative to JSX for coffeescript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


NPM Package Build Status Sauce Test Status Dependencies

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

  • use all coffeescript features naturally when building a react component's virtual-DOM
  • tiny single file with just under 100 lines of simple, readable, maintainable code
  • huge test suite passing Build Status with code coverage
  • continuously tested in Node.js (0.12, 4 and 5) 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
  • changelog
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) -> itemText
    reactKup (k) ->
      k.ul createItem

TodoApp = React.createClass
  getInitialState: ->
    items: ['Buy Milk', 'Buy Sugar']
    text: 'Add #3'
  onChange: (e) ->
  handleSubmit: (e) ->
    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' TodoList,
          items: that.state.items
        k.form {
          onSubmit: that.handleSubmit
        }, ->
            onChange: that.onChange
            value: that.state.text
          k.button "Add ##{that.state.items.length + 1}"

look at the tests for additional examples



license: MIT

You can’t perform that action at this time.