Add displayName option to connect()

[esamattis]

I'm using bunch of custom HOCs with connect() like

function addPostTitle(postId) {
  return connect(
    state => ({title: state.posts[postId]}),
    null, null, {name: "addPostTitle"})
  );
}

This causes React devtools to be polluted with useless Connect(Connect(Connect(Something))) style components. This would allow to use more meaningful names.

[gaearon]

I think I’d rather not add a separate API for this.
You can reassign it manually, so I think this would work best.

var c = connect(...)
c.displayName = ...

[esamattis]

I know but it gets really cumbersome if I want to have the original name in it:

function addPostTitle(postId) {
  return Component => {
    var C = connect(state => ({title: state.posts[postId]}))(Component);
    C.displayName =`addPostTitle(${getDisplayName(Component)})`;
    return C;
  };
}

Also I need to the implement the getDisplayName or add dependency which implements it.

[gaearon]

OK. Let’s rename it to displayName?

[esamattis]

OK. Let’s rename it to displayName?

Yeah. It's more consistent with other APIs.

[esamattis]

PR updated. Also added a simple test case for it.

[TigerC10]

Am I the only one that thinks that the Connect wrapper should just leverage the same displayName as the original wrapped component?

@ianobermiller (FormidableLabs/radium#271 on Jul 17, 2015)
Can you imagine if every decorator did the same thing? Radium(Relay(autobound(Button))) 👎

[timdorr]

Superseded by #416