GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-03-17 05:02:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(official-storybook): fix displayName for memo & add forward-ref example

Browse Source 
Component should be fed directly to React.memo|forwardRef functions so that displayName is set. Previously was passing an anonymous arrow fn...
This commit is contained in:
Andrew Salib 2020-10-05 14:46:37 +11:00
parent f80bc26810
commit 1b7f55000e
2 changed files with 18 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
examples/official-storybook/stories/addon-docs/react-forward-ref.stories.js Normal file
View File

@ -0,0 +1,16 @@
import React from 'react';
import { DocgenButton } from '../../components/DocgenButton';
const ButtonWithForwardRef = React.forwardRef(DocgenButton);
export default {
title: 'Addons/Docs/ButtonWithForwardRef',
component: ButtonWithForwardRef,
parameters: {
chromatic: { disable: true },
docs: { source: { type: 'dynamic' } },
},
};
export const displaysCorrectly = () => <ButtonWithForwardRef label="Hello forwardRef World" />;
displaysCorrectly.storyName = 'Displays components with forwardRef correctly';

4
examples/official-storybook/stories/addon-docs/react-memo.stories.js
View File

@ -1,7 +1,7 @@
import React from 'react';
import { DocgenButton } from '../../components/DocgenButton';
const ButtonWithMemo = React.memo((props) => <DocgenButton {...props} />);
const ButtonWithMemo = React.memo(DocgenButton);
export default {
title: 'Addons/Docs/ButtonWithMemo',
@ -12,5 +12,5 @@ export default {
},
};
export const displaysCorrectly = () => <ButtonWithMemo label="Hello World" />;
export const displaysCorrectly = () => <ButtonWithMemo label="Hello memo World" />;
displaysCorrectly.storyName = 'Displays components with memo correctly';