I am building a documentation website for a custom design system and I am trying to create a table that displays the props of each component. The functional component table takes any component and outputs a table with the props, types..etc. I am struggling to find a way to do that for the props and types. My goal is to have something close to storybook args, but without using storybook.
example :
| Prop | type |
|---|---|
| variant | buttonvariant |
| onclick | function |
Is that possible?
Types exist only at compile time, so all traces of the props and their types are removed from your code when it's executing.
For example, this:
interface MyComponentProps { abc: number }
function MyComponent(props: MyComponentProps) {
return <div>test</div>
}
Compiles to:
"use strict";
function MyComponent(props) {
return React.createElement("div", null, "test");
}
So the props names and their types are completely absent in this output.
However, this answer has some resources about creating React PropTypes from your typescript types during the compilation of your code to javascript. This creates runtime version of your prop types that you could then theoretically iterate over in a react component to visualize it.
