react-kup is a simple, nonintrusive alternative to JSX for coffeescript
0.4.0 introduced some breaking changes. see changelog below !
TodoItem = ReactcreateClass: -># when called with a callback `reactKup`# calls the callback with `k` and# returns result of all calls on `k`reactKupif thatpropsitemisDonekliTodoList = ReactcreateClass: -># when called without a callback `reactKup` returns a builder `k`k = reactKupif @propsisHellokdiv "Hello "elsekdiv "Goodbye "kul ->for i in 1...5kli ikbuild# return result explicitelyreturn kresult
lightweight: single file (lib/react-kup.js) with just under 100 lines.
portable: works with CommonJS (NodeJS), AMD or without any module system.
stable: extensive tests. and used in production.
it uses the same concept as kup (kup is an html builder for nodejs) but builds up nested react elements instead of html strings.
npm install react-kup
has all the methods of
var reactKup = require'react-kup';
define'my-module' 'react-kup'// ...;
when no module system is present including lib/react-kup.js
sets the global
reactKup = require'react-kup'HelloMessage = ReactcreateClass: ->that = thisreactKupkdiv "Hello "component = name: 'John'ReactrenderComponentToString component# => <div>Hello John</div>
HelloMessage = ReactcreateClass: ->that = thisreactKupkdiv "Hello "= ->mountNode = documentgetElementById'my-app'component = name: 'John'ReactrenderComponent componentmountNode
HelloMessage = ReactcreateClass: ->that = thisk = reactKupkdiv "Hello "# throwskdiv kkelementkpeek= ->mountNode = documentgetElementById'my-app'component = name: 'John'ReactrenderComponent componentmountNode
.componentmethod renamed to
.textmethod now uses
React.DOM.textwhich gets wrapped in a
TL;DR: bugfixes, issues and discussion are always welcome. ask me 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 and only if the changes are well written, documented and tested.
communicate: write an issue to start a discussion before writing code that may or may not get merged.