Nonchalantly Performs Magic
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    react-kuppublic

    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: nextItemstext: 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

    install

    npm i react-kup

    Downloadslast 7 days

    3

    version

    1.0.0

    license

    MIT

    repository

    github.com

    last publish

    collaborators

    • avatar