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.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib
src
test
.gitignore
.travis.yml
.zuul.yml
CHANGELOG.md
CODE_OF_CONDUCT.md
LICENSE
README.md
bower.json
contributing.md
package.json

README.md

react-kup

NPM Package Build Status Sauce Test Status codecov.io 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 codecov.io 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) ->
        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

changelog

license: MIT

You can’t perform that action at this time.