Issue by FarhadG
_Wednesday Aug 24, 2016 at 06:49 GMT_
_Originally opened as https://github.com/storybooks/react-storybook-addon-info/issues/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.
Comment by carlosrberto
_Thursday Jan 26, 2017 at 17:08 GMT_
I think propTables
should replace the default propTables
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.
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.
Most helpful comment
Comment by carlosrberto
_Thursday Jan 26, 2017 at 17:08 GMT_
I think
propTables
should replace the default propTables