React.js: Defining custom attributes

Question

React has a few custom defined attributes. How can I define my own?

Why?

I have an Arc component, a few usage examples below:

<Arc startAngle="90" endAngle="270" stroke="hsl(38, 100%, 50%)" strokeWidth="0.5" />
<Arc startAngle="45" endAngle="90" fill="hsla(38, 100%, 50%, 0.2)" />
<Arc startAngle="0" endAngle="45" className="pie-slice" />

startAngle and endAngle attributes are required. All the other props are DOM properties that I just "proxy" to the root node.

var Arc = React.createClass({
    render: function() {
        return <path d={this.calcPath()}
            stroke={this.props.stroke}
            strokeWidth={this.props.strokeWidth}
            fill={this.props.fill}
            className={this.props.className}
        />
    },
    calcPath() {
        // ...
    }
});

I’m not happy with the boilerplate code for every property. I want to copy all the passed properties except startAngle and endAngle.

I came up with the following API:

var Arc = React.createClass({
    PROPS: {startAngle: true, endAngle: true},
    render: function() {
        return <path d={this.calcPath()} copyProps={cloneShallow(this.props, this.PROPS)}/>
    }
});

function cloneShallow(obj, exclude) {
    var result = {};
    var keys = Object.keys(obj);
    for (var i = 0; i < keys.length; i++) {
        var key = keys[i];
        if (!exclude.hasOwnProperty(key)) {
            result[key] = obj[key];
        }
    }
    return result;
}

I’d like to define copyProps attribute.

XSLT allows to tunnel attributes:

<path d={...}>
  <xsl:copy-of select="@*" />
</path>

I want something similar for React.js.

Felix Kling · Accepted Answer · 2014-04-04 03:06:21Z

3

You can use this.transferPropsTo:

return this.transferPropsTo(<path .../>);

If you want to omit certain props, you can explicitly set them to null, e.g.

<path startAngle={null} />

but if the component you transfer the props to doesn't have such a prop anyway, it's not really necessary to do that.

See the documentation for more information.

edited Apr 4, 2014 at 3:06

answered Apr 4, 2014 at 2:43

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Brigand Over a year ago

Note: transferPropsTo will be deprecated in 0.11

Felix Kling Over a year ago

@FakeRainBrigand: Yep, but for now, that's the way to do it, until we get something new :)

Sophie Alpert Over a year ago

It's likely that transferPropsTo will never go away entirely, but we're looking at adding some alternative solutions which are easier to reason about for most cases.

NVI · Accepted Answer · 2014-10-16 22:55:47Z

1

Starting React v0.12, transferPropsTo are replaced by JSX Spread Attributes:

return <path {...this.props}/>

answered Oct 16, 2014 at 22:55

NVI

15.1k17 gold badges69 silver badges104 bronze badges

1 Comment

Juho Vepsäläinen Over a year ago

Is there a nice way to exclude certain properties from a spread?

Collectives™ on Stack Overflow

React.js: Defining custom attributes

Why?

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Why?

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related