Application Development Meanderings

If you use typescript with react you may wonder what the right signature is for your “properties” interface. Obviously, your component will have few to many specific properties that reflect your domain. However, you may wish to also provide for the ability to add other attributes, such as those valid for a div property. In other words, you want to extend your props interface with that of the properties from a div element. How do you do that? There are really two issues: How do you extend your props interfaces How do you filter the props once you receive them to just those that apply. Extend Your Prop Interface or Use Sum Types It’s not uncommon to see interface Props { className ? : string yourProp ? : number } with the idea of using it in class MyComponent extends React.Component<Props, any> somewhere. If your component will have an outer div, you may also pass in a react element so that its configurable. But let’s say your outer element is a div and you wan...

We would like to create a flexible set of functions for rendering a view on checkboxes. Many libraries try to take “control” of the rendering process and introduce brittleness into the component by making too many assumptions and then trying to provide too many “options” to allow you to customize the more monolithic comopnent. By breaking apart our functions into smaller ones, while offering defaults with all the bells and whistles, we can make a much more flexible library that can be used in many different scenarios. You can use ramda and recompose “in the small” assuming you are using it elswhere in your library that justifies its inclusion in your bundle. Here is a simple example of how we can use these extra tools to create a very simple, non-aria enabled check box list. It is not optimized for large lists either i.e. its not “virtualized.” import React from "react" import { defaultProps } from "recompose" import R from "ramda" import { ...