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.
- no additional build step required
- no mixin. though you could build one yourself.
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
- added AMD support
- removed deprecation warnings for react 0.12.2
- react-kup now comes with a version of react (0.12.0) caused confusion
- supports both react-classes and react-elements as arguments to
- supports react elements as content
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.