PropsTable is not working with components encapsulated by React.forwardRef()

<PropsTable of={Input} /> only works when I remove the React.forwardRef(). The following code is Typescript, and I also have typescript: true on my config.

import * as React from "react"
import styled from "styled-components"

// Estilos ---------------------------------------------------------------------

const StyledInput = styled.input.attrs({
  className: "form-control",
})`
  height: 40px;
  margin-bottom: 0;
  font-size: 0.8125rem;
`

const FormRow = styled.div.attrs({
  className: "form-group",
})`
  margin-bottom: 1.25rem;
`

// <Input /> -------------------------------------------------------------------

interface IPInput {
  id: string
  label?: string | false
  placeholder?: string
}

const Input = React.forwardRef(
  (
    { id, label, placeholder, ...extraProps }: IPInput,
    ref: React.RefObject<HTMLInputElement>,
  ) => (
    <FormRow>
      <label
        htmlFor={id}
        className={[false === label ? "sr-only" : ""].join(" ")}
      >
        {false === label && placeholder ? placeholder : label}
      </label>
      <StyledInput
        innerRef={ref}
        id={id}
        placeholder={placeholder}
        {...extraProps}
      />
    </FormRow>
  ),
)

export default Input

[pedronauck]

I think that this will be fixed in the v1 ✌️

[jnaudin]

Hi

PropsTable uses __docgenInfo’s data. you do not have access to it in a HOC but in the wrapped component. You have to give the wrapped component to <PropsTable>

2 solutions :

• import both component and wrapped component (you have to export wrapped component). Use the wrapped component to display <PropsTable>

// ./MyComponent.js
export const MyComponent = ...;
export default MyHoc(MyComponent);

// ./MyComponent.mdx
import MyComponent, {MyComponent as MyComponentWithPropTypes} from './MyComponent'
<Playground><MyComponent /></Playground>
<PropsTable of={MyComponentWithPropTypes} />

• use render().type to access to wrapped component via hoc

// ./MyComponent.js
const MyComponent = ...;
export default MyHoc(MyComponent);

// ./MyComponent.mdx
import MyComponent from './MyComponent'
<Playground><MyComponent /></Playground>
<PropsTable of={MyComponent.render().type} />

By default MyComponent.render().type does not have __docgenInfo. __docgenInfo is generated by babel-plugin-react-docgen and the default value of the resolver option (findAllExportedComponentDefinition) doesn’t create the __docgenInfo if the component is not exported. You should use findAllComponentDefinitions value. See https://github.com/storybooks/babel-plugin-react-docgen#babelrc-options for more info.

Otherwise you should export the wrapped component (like in the first solution) to have access to __docgenInfo.