How to name component props? Best practice

While developing custom component for Dash, i often add new props. Is there some best practices on how to name these them (maybe @chriddyp or @alexcjohnson can shred some light)?

Take for example the GeoJSON component that i am working on. I guess that for props that are mapping 1:1 of the underlying object (e.g. the pointToLayer prop), the name should be kept the same (it makes the structure more transparent, and makes it possible to reuse documentation). But what about new props? Consider e.g the prop that holds the last feature clicked. How should it be named?

  • feature_click
  • click_feature
  • featureClick
  • clickFeature

At the moment i am using snake case for Dash specific props with the event first, i.e. click_feature for this prop. However, props that would be relevant in a general React context (e.g. the hoverStyle prop), i tend to name with camelcase.

Any comments/suggestions are appreciated :slight_smile:

This is a tricky one! The convention we’ve landed on is using snake_case for everything except className. For the react component props, we end up doing a conversion from snake case to camel case within the react code - it’s more work but ultimately more consistent with the rest of the props.

For clicks, we’ve been doing n_clicks to denote that this is an integer. or click_timestamp if it’s a timestamp of when that button was clicked.

I’m not a huge fan of how n_clicks looks but it is self apparent. in the future i might advocate for changing this in a backwards compatible way to something like e.g. clicks but there aren’t any plans to do so now and n_clicks would be the best for consistency.

Haha, thanks for the input. Yes, naming stuff is never easy… I can see why you would keep react prop naming convention in the code (js names i.e. camelCase in js) and convert it when components are generated (python names, i.e. snake_case in python). In some sense, this approach very clean.

That being said, for light wrappers around React component, i am not sure it’s worth the trouble. What’s worse is that i could image that this conversion would make it harder to google issues/documentation, in particular for new users (i guess you would have to translate snake_case to camelCase manually in the process. And you would have to know that you have to do this).