show real souce code instead of the third party lib HoC wrapper
See original GitHub issuesupport request summary
I use a HOC from the third party lib,and the source code always show the HoC wrapper not the real source code. Even when I use the addDecorator
. I find all existed suggestions in issues are about hoc defined by themselves (such as issue 938 . How about third party hoc solution?
Steps to reproduce
my code:
import { Form } from 'antd' // HOC from third party lib
import { RealComponent } from './RealComponent'; // my own component
const FormDecorator = storyFn => {
const Component = Form.create()(storyFn)
return <Component />
}
storiesof('Test', module)
.addDecorator(FormDecorator)
.add('demo', (props) => {
......
<RealComponent config={config}> form={props.form} / >
})
expected source code show:
<RealComponent config={config} form{props.form />
but real show:
<Form(WrappedComponent)/>
I knew there were many existed issues about the similar problem, but I can’t find solution about this one. Thx.
Please specify which version of Storybook and optionally any affected addons that you’re running
- @storybook/react ^5.0.3
- @storybook/addon-info ^5.0.6
Issue Analytics
- State:
- Created 4 years ago
- Reactions:1
- Comments:15 (6 by maintainers)
Top Results From Across the Web
Higher-Order Components - React
A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API, per...
Read more >Introduction to Higher-Order Components in React by example
In this blog, we will learn about High-Order Components and how we use them in React. It also covers coding and debugging Higher-order ......
Read more >Understanding React Higher Order Component (HOC)
At a high-level HOC enables you to: Reuse code, reuse logic, and bootstrap abstraction; Render Highjacking; State abstraction and manipulation ...
Read more >How to develop your React superpowers with the HOC Pattern
HOCs are common in third-party React libs, such as Redux or React Router. I bet you've used some of them, maybe without being...
Read more >What Are Higher-Order Components in React?
Wrapper Components; Using Higher-Order Components with the React Context API ... A higher-order component... function hoc(Component, other, ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@shilman My version is 5.2.0-alpha.0. I get it and thanks for your patience.
Hey there, it’s me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!