storybook: addon-docs: Props doesn't work when using React.memo.

Describe the bug I trying show the props in docs page using <Props of={Component}/> in .mdx file. But i receive this message “No props found for this component”

To Reproduce Steps to reproduce the behavior:

Create Component in React and wrapped this with React.memo
Run Storybook and open docs tab
The prop table does not appear

Screenshots ex1

Code snippets

Button.js

function Button({ label, onClick }) {
  return (
    <ButtonContainer onClick={onClick}>
      <Label> {label} </Label>
    </ButtonContainer>
  );
}

Button.propTypes = {
  label: PropTypes.string.isRequired,
  onClick: PropTypes.func.isRequired,
};

export default React.memo(Button);

button.stories.mdx

# Button

Exemplo do **botão** padrão.

<Preview withToolbar>
  <Story name="Default" height="100px" parameters={{ decorators: [withKnobs] }}>
    <Button 
      labelColor={text("Label Color", theme.colors.white)}
      onClick={() => alert("Button Click")} />
  </Story>
</Preview>

## Props

<Props of={Button} />

System: OS: Linux 4.15 Ubuntu 18.04.3 LTS (Bionic Beaver) CPU: (4) x64 Intel® Core™ i5-3570 CPU @ 3.40GHz Binaries: Node: 10.15.3 - /usr/local/bin/node Yarn: 1.19.1 - /usr/bin/yarn npm: 6.4.1 - /usr/local/bin/npm Browsers: Chrome: 78.0.3904.108 Firefox: 72.0.1 npmPackages: @storybook/addon-actions: 5.3.7 => 5.3.7 @storybook/addon-backgrounds: 5.3.7 => 5.3.7 @storybook/addon-centered: 5.3.7 => 5.3.7 @storybook/addon-docs: 5.3.7 => 5.3.7 @storybook/addon-knobs: 5.3.7 => 5.3.7 @storybook/addon-storysource: 5.3.7 => 5.3.7 @storybook/addon-viewport: 5.3.7 => 5.3.7 @storybook/core: 5.3.7 => 5.3.7 @storybook/react: 5.3.7 => 5.3.7 @storybook/theming: 5.3.7 => 5.3.7 npmGlobalPackages: @storybook/cli: 5.3.4

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 11
Comments: 35 (16 by maintainers)

Commits related to this issue

Props: #9586 repro — committed to storybookjs/storybook by shilman 4 years ago

Most upvoted comments

Unsatisfying workaround is to also export your pure component and use that for documentation purposes

+10

shilman on Jan 21, 2020

FWIW I discovered that <Props of={MemoizedComponent.type} /> will correctly render a props table. No idea what’s going on under the hood there, lol

igloude on Apr 28, 2020

@lwaghorn

Actually, the exported component is the same in both cases. It’s passing storybook the component as myComponent.type that did the trick!

My PR should make this unnecessary 👍

andezzat on Oct 7, 2020

Sorry for the shameless bump, but is this scheduled to be fixed in an upcoming release? 😃

breytex on Mar 16, 2020

I am not sure if this is resolved, but I am still facing the same issue, where controls ( props ) are not getting generated automatically if I wrap my components using React.memo “@storybook/addon-essentials”: “^6.0.21”, “@storybook/react”: “^6.0.21”, “react-docgen-typescript@1.20.4”,

Somil91 on Sep 12, 2020

@hipstersmoothie thanks Andrew! (I am also an Andrew!)

Here’s the requested repo for you! https://github.com/tm1000/storybook-repro

Look in the stories folder. I commented by providing two examples. One with the direct export (which works) and one with the wrapped export (using memo, does not work)

tm1000 on Sep 4, 2020

@shilman Open PR to react-docgen-typescript to fix the React.memo behavior

https://github.com/styleguidist/react-docgen-typescript/pull/288

hipstersmoothie on Aug 24, 2020

@SomilKumar what happens when you set:

export default {
  title: '...',
  component: MyComponent.type,
}

shilman on Aug 23, 2020

@mkinfrared if you submit a pr to react-docgen-typescript-loader with just a test case I will try to fix it

hipstersmoothie on Apr 27, 2020

I encountered the same issue as @lukemorales had. The description and default value of each prop is not being filled.

I ended up using the workaround in the 1st comment.

shunfan on Sep 29, 2021

I was able to resolve this by changing my component from

const myComponent = memo(()=><div>...</div>)
export default myComponent

const myComponent = ()=><div>...</div>
export default memo(myComponent)

and then in storybook doing the

export default {
  title: 'myComponent',
  component: myComponent.type,
  decorators: [withKnobs],
};

lwaghorn on Oct 7, 2020

@andezzat this is the issue i was mentioning. i’m thinking maybe your “exotic component logic” from #12638 can fix this problem if applied here:

https://github.com/storybookjs/storybook/blob/next/addons/docs/src/frameworks/react/extractProps.ts#L31-L34

you can see that there’s an attempt to do something like it already, but that it’s not working as desired.

shilman on Oct 5, 2020