DailyJS

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

Alex R. Young

Subscribe

@dailyjs

Facebook

Google+

libraries components react

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

Posted by Alex R. Young on .
Featured

libraries components react

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

Posted by Alex R. Young on .

rc-calendar

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

d3rrc

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.render(  
  <LineChart
    chart-height="320"
    chart-seriesNames={seriesNames}
    chart-seriesValues={seriesValues}
    chart-pointNames={pointNames}
    chart-pointValues={pointValues}
    chart-lineInterpolation="cardinal"
    data={data}
  />,
  document.getElementById('output')
);

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

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.