Styled Components

[PaulieScanlon]

Hey, i think this is more a question and am happy to close this issue if so but...
i am using React-Emotion and Typescript and am using Storybook to document props.

Example Button

interface IButton {
  buttonColour?: string;
  fontColour?: string;
}
export const Button = styled.button<IButton>({label: "button", ...})

The prop table in Storybook details my x2 props from the interface but also all the standard html/csspropTypes including about 50 aria ones.

Is there a setting other than listing every single one to exclude i can use so i only see the props from my interface?

Thanks in advance!

[strothj]

Hello,

I've merged in a change from #21, thanks @rkostrzewski, which adds support for providing a function to filter props.

We're hoping to see styleguidist/react-docgen-typescript#111 merged in so that we gain access to the component's filename and interface in the filtering function.

[teddybradford]

What is the best way to filter out inherited HTML element props using the propFilter loader option?

[rkostrzewski]

@teddybradford I've used following configuration entry to achieve this:

{
  loader: require.resolve('react-docgen-typescript-loader'),
  options: {
    propFilter: (prop) => {
        if (prop.parent == null) {
          return true;
        }

        // Filter out props which type definition is placed in react package
        return prop.parent.fileName.indexOf('node_modules/@types/react') < 0;
      }
    }
  }
}

Do note that this won't work if you're using sth like webpack's thread-loader for multi threading as the options are converted to JSON to send to another node process

[teddybradford]

Thanks, @rkostrzewski!

[gmukul01]

@rkostrzewski I used your solution but still, 'ref' prop is coming. Could you please help for the same.

property	propType	required	default	description
variant	"solid" | "outlined" | "flat"	yes	-	Variant of the Button
fullWidth	boolean	-	-	Fullwidth
ref	((instance: HTMLButtonElement) => void) | RefObject	-	-