React Roundup: rc-calendar, D3 React Reusable Charts, tcomb-form

2014-12-18 00:00:00 +0000 by Alex R. Young


rc-calendar (GitHub: react-component/calendar, License: MIT) by yiminghe is a port of kissyteam/date-picker that allows you to render calendars with React.render(<Calendar />, container). It has props for locale, showing today, and the select/blur events, and it includes some examples and tests.

The supported locales are en-us and zh-cn, so you can actually display a Chinese calendar UI. It also supports aria and keyboard accessibility.

D3 React Reusable Charts


D3 React Reusable Charts (GitHub: jdarling/d3rrc, License: MIT, npm: d3rrc) by Jeremy Darling is a graph library that supports bar charts, pie charts, scatter charts, and time series. It allows you to use a LineChart element. This code is taken from the multi-line chart example:


React makes graphs quite clean by allowing you to mix the markup and JavaScript data. For more examples, take a look at the full d3rrc example list.


tcomb-form (GitHub: gcanti/tcomb-form, License: MIT) by Giulio Canti is a UI library for making forms. As we all know, making forms is web development drudgery, so anything to take the pain away is welcome. Giulio's library is "domain driven", which means it's able to generate a form based on the domain model.

There's a personal form example that shows the kind of form I've spent all too much time creating in the past. The source uses a kind of strongly typed model definition approach:

var t = require('tcomb-form');

var Gender = t.enums({
  M: 'Male',
  F: 'Female'

var Country = t.enums({
  US: 'United States',
  IT: 'Italy'

var Person = t.struct({
  fullName: t.Str,
  nickname: t.maybe(t.Str),
  gender: Gender,
  country: Country,
  tags: t.list(t.Str)

var Form = t.form.create(Person, {
  auto: 'labels',
  fields: {
    gender: {
      factory: t.form.radio

You don't have to use this to define the actual models in your application. With this library, it might be better to use a lightweight model/view model approach, so you'd treat the tcomb models as view models that define the behaviour specific to forms.