question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

show real souce code instead of the third party lib HoC wrapper

See original GitHub issue

support 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

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:1
  • Comments:15 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
nianiaJRcommented, May 30, 2019

@shilman My version is 5.2.0-alpha.0. I get it and thanks for your patience.

0reactions
stale[bot]commented, Jul 20, 2019

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!

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found