Why isn't the Properties table showing for my live component?
  • 10 Jan 2023
  • 1 Minute to read
  • Dark
    Light

Why isn't the Properties table showing for my live component?

  • Dark
    Light

Article Summary

If you're using TypeScript to build Storybook stories that are then synced to DSM, you may encounter an issue where the Properties table won't display. 

If this occurs, first check the syntax of your forwardRef React components. For DSM to correctly parse your forwardRef React components and build the Properties table, you will need to write your components the following way:

const Button = forwardRef = forwardRef((props: Props, ref: Ref<htmlbuttonelement data-tomark-pass="">) => { … }</htmlbuttonelement>

In that example, the crucial distinction is where you place Props and HTMLButtonElement.

This distinction is required due to a particular library the DSM Storybook integration uses to read your code and parse props being passed to a component. When using TypeScript and the syntax differs from the above example, the library has issues reading props.


Was this article helpful?