Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

<PropsTable> wont render when using HOC component #635

Closed
GradyTruitt opened this issue Feb 14, 2019 · 3 comments
Closed

<PropsTable> wont render when using HOC component #635

GradyTruitt opened this issue Feb 14, 2019 · 3 comments

Comments

@GradyTruitt
Copy link

Bug Report

Describe the bug

I have a basic React + styled-components setup. Everything is working great until I use the withTheme HOC from styled-components. If I use any HOC's in my components the <PropsTable> no longer renders... Is there a solution to this?

To Reproduce

Docz versions:
docz v0.13.7
docz-theme-default v0.13.7

(I also tried with 0.14.0-alpha.68 on both but still doesn't work..

This is my component file Test.js

import React from 'react'
import PropTypes from 'prop-types'
import styled, { withTheme } from 'styled-components'

const Test = ({ name }) => (
  <Name>{name}</Name>
)

const Name = styled.div`
  display: inline-flex;
  padding: 15px 20px;
  margin: 10px;
  border-radius: 5px;
  background-color: yellowgreen;
  justify-content: center;
  align-items: center;
  color: white;
`
Test.propTypes = {
  name: PropTypes.string
}

Test.defaultProps = {
  name: 'John Deere'
}

export default withTheme(Test)

and my Test.mdx file

---
name: Test
menu: Components
---

import { Playground, PropsTable } from 'docz'
import Test from './'

# Test

<PropsTable of={Test} />

## Basic Usage

<Playground>
  <Test />
  <Test name="Jackson" />
</Playground>

Expected behavior
The props table should render like below:
(this only renders when I export the component without the HOC: export default Test)

screen shot 2019-02-14 at 3 17 59 pm

Any kind of fix with using HOC's would be helpful...

@jnaudin
Copy link

jnaudin commented Feb 15, 2019

There is a bug with the same issue with forwardRef : #334 (comment)

You have to use Test component to use <PropsTable>.

  • You can import Test and withTheme(Test). WithTheme(Test) would be the default export.
import Test, {Test as TestWithPropTypes} from './'
<Playground><Test /></Playground>
<PropsTable of={TestWithPropTypes} />
  • the other solution is to access to Test with render.type() :
<PropsTable of={Test.render().type} />

@Glinkis
Copy link

Glinkis commented Feb 28, 2019

This is a huge problem when wrapping components in React.memo.

@seancheung
Copy link

seancheung commented Feb 9, 2021

It's because HOC loses all static props while propTypes is static.

You could type-cast it

export default (withTheme(Test) as unknown) as typeof Test

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants