React indeterminate

By  on  

I've fallen in love with React.js and JSX over the years; state-based rendering and a logical workflow have made me see the light of this modern framework. That doesn't mean I don't sometimes get a bit frustrated that the "simple" things seem harder than they should be. Getting a reference to an element and modifying its properties used to be simple but now you have to take into account you don't usually have element references -- you need to think in a different way. I learned this when I needed to set a checkbox's inderterminate property, a property not recognized via an attribute, one that requires a handle on the element and setting a property directly.

To add the indeterminate property to the checkbox, I needed to take advantage of the ref attribute:

const { value, checked, indeterminate } = this.props

return render(
    <input
        type="checkbox"
        value={value}
        checked={checked}
        ref={el => el && (el.indeterminate = indeterminate)}
    />
)

Since the ref is run on each render, the indeterminate property is updated appropriately, and thus the checkbox appears as expected.

Regardless of how amazing your framework appears, there's always a blind spot that requires a bit of a hack to accomplish what's expected. That's what a framework does, though: gives you 99% of what you need and makes the 1% difficult!

Recent Features

  • By
    How to Create a Twitter Card

    One of my favorite social APIs was the Open Graph API adopted by Facebook.  Adding just a few META tags to each page allowed links to my article to be styled and presented the way I wanted them to, giving me a bit of control...

  • By
    Vibration API

    Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user.  One of those simple APIs the Vibration API.  The Vibration API allows developers to direct the device, using JavaScript, to vibrate in...

Incredible Demos

  • By
    Introducing MooTools LinkAlert

    One of my favorite Firefox plugins is called LinkAlert. LinkAlert shows the user an icon when they hover over a special link, like a link to a Microsoft Word DOC or a PDF file. I love that warning because I hate the surprise...

  • By
    Introducing MooTools HeatMap

    It's often interesting to think about where on a given element, whether it be the page, an image, or a static DIV, your users are clicking.  With that curiosity in mind, I've created HeatMap: a MooTools class that allows you to detect, load, save, and...

Discussion

  1. BryanYang

    the last words are exactly. there is always something we miss when we design a framework. so the best way is to optimize again and again.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!