docz: PropsTable does not render

Bug Report

PropsTable did not render anything in the screen. (cc #138) I’m using TypeScript.

To Reproduce

---
name: Button
---

import { PropsTable } from 'docz'

import Button from './Button'

# Button

<Button onPress={() => alert('pressed')}>Click</Button>

<PropsTable of={Button} />

import React from 'react'
import { StyleSheet, Text, Touchable } from 'react-primitives'

const styles = StyleSheet.create({
  text: {
    color: 'green',
  },
})

export interface ButtonProps {
  test?: string
  children: string
}

const Button: React.SFC<ButtonProps> = props => (
  <Touchable {...props}>
    <Text style={styles.text}>{props.children}</Text>
  </Touchable>
)

export default Button

Expected behavior

Render PropsTable, getting props from TypeScript interface automatically

Environment

OS: macOS 10.14
Node/npm version: Node 8/npm 5

Additional context/Screenshots

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 3
Comments: 22 (3 by maintainers)

Most upvoted comments

I had the same issue. The problem was import line for ‘react’. import * as React from 'react' helped.

mrac on Aug 15, 2018

@JeroenReumkens Gave it a quick try, but didn’t work with import { default as ComponentName } from './Component'. Maybe this issue somehow relates to this issue at react-docgen-typescript?

markusoelhafen on Aug 27, 2018

Try changing export default Input; to export { Input }; or exporting as a named export in addition to the default export.

I believe the package react-docgen-typescript handles the parsing. I’ve always had the most success using named exports.

strothj on Aug 27, 2018

I’ve tried import * as React from 'react' but doesn’t work. Using docz: ^1.3.2 with react / typescript.

ex) Button folder has index.tsx with export const Button and doc.mdx with

import { Props } 'docz';
import { Button } from './';
<Props of={Button} />

but doesn’t render prop table…

yiyeum on Nov 14, 2019

Having the same issue as @wceolin

smakosh on Oct 27, 2018

I’ll close this issue in favor of #240, since both is related to pass custom configuration to react-docgen resolver!

pedronauck on Sep 11, 2018

I already had import * as React from 'react'; but the props table still didn’t render.

What did the trick, was changing the default exported element with lowercase instead of PascalCase.

so, this didn’t render the table:

const Input: React.StatelessComponent<InputProps> = (props): JSX.Element => (
  <StyledInput {...props} />
);

export default Input;

but this did:

const input: React.St...

export default input;

I would still rather use camelcase for my constants, any chance to solve this?

markusoelhafen on Aug 24, 2018

Same bug here, only worked with @mrac suggestion.

It’s possible that Docz, or other dependencie that handle the PropsTable, don’t work with the following TypeScript setting?

// tsconfig.json
{
  "compilerOptions": {
    ...
    "allowSyntheticDefaultImports": true,
    ...
  },
}

This setting allows to use import React from 'react' instead of import * as React from 'react'

mdapper on Aug 16, 2018