Specifying a propTable still renders two prop docs

[shilman]

Issue by FarhadG
Wednesday Aug 24, 2016 at 06:49 GMT
Originally opened as storybook-eol/react-storybook-addon-info#59

---

I'm currently exporting the component along with a wrapped version (default export) so that I can document the component in isolation, since the default one that is wrapped with several other higher order functions doesn't provide reference to the propTypes for react-storybook to use.

For example:

export class SampleComponent extends Component {

}

export default compose(...)(SampleComponent);

I'm using the { SampleComponent } import for documentation purposes, however, I get two rendered UIs for the propTables.

"SampleComponent" Component
property    propType    required    default
contextStyles   object  no  {{}}
height  number  no  -
image   string  yes -

"SampleComponent" ComponentNo propTypes defined!

Even though I'm specifying the options for the propTables with { propTables: [SampleComponent], inline: true }, I get both rendered versions. Any way to disable the automatic propTable for the component that is rendered? It seems like that's what's happening: the rendered component's propTypes are also being used, hence the undefined since it's exported after several higher order function wraps.

Perhaps, there's a better way to achieve what I need altogether...

Thank you for your suggestion.

[shilman]

Comment by carlosrberto
Thursday Jan 26, 2017 at 17:08 GMT

---

I think propTables should replace the default propTables

[shilman]

Comment by FarhadG
Monday Jan 30, 2017 at 17:41 GMT

---

An approach I've found to be quite useful is to simply export the "wrapped" and "unwrapped" component so that I can not only use them to easily test the wrapped component (and its higher order enhancements) but also the bare component but also the ability to document the component with Storybook quite easily.

This resolves the double rendering issue as I use the unwrapped component for that portion of the documentation and can be used to leverage other Storybook functionalities.

I hope this is useful for others that are running into the same issue.

[jebeck]

I commented on the outdated original issue, and now that that's been closed, I found this open issue, so I'll copy my comment over in case it's useful for anyone else: in cases where a wrapper is unavoidable (e.g., a story for an SVG-internal component that requires a top-level <svg> wrapper), you can specify a propTablesExclude option to blacklist (all of) the component(s) you don't want prop tables rendered for.