[Advanced] Request for props type example: "Props: One only if the other"

[stephenkoo]

What cheatsheet is this about? (if applicable)
Advanced cheatsheet

What's your issue or idea?
Your prop type examples are awesome.

I'm keen to find an example that answers this question here - only allow prop B if prop A is passed to a component. 😄

[swyxio]

probably try using function overloading. try it, if it doesn’t work, post what you tried.

[stephenkoo]

Would it be done like this?

type CommonProps = {
  children: React.ReactNode;
}

type NoTruncateProps = CommonProps & {
  truncate?: false;
}

type TruncateProps = CommonProps & {
  truncate: true;
  expanded?: boolean;
}

function Typography(props: NoTruncateProps): JSX.Element;
function Typography(props: TruncateProps): JSX.Element;
function Typography({ children, as: Tag, truncate, ...otherProps }: NoTruncateProps | TruncateProps) {
  if (truncate) {
    return (<Tag truncate={truncate} expanded={otherProps.expanded} {...otherProps}>{children}</Tag>)
  }
  return (<Tag truncate={truncate}>{children}</Tag>)
}

[swyxio]

hmm. not sure you can do truncate ?: false like that. did it work?

edit: huh, TIL about boolean literals. yeah i think your thing works. wanna PR?

[stephenkoo]

Let me test it first - my actual component is a bit more complex so I'll need to double-check if the above works.

[stephenkoo]

PR (with some modifications to above code): #111

[swyxio]

very nice! thank you and i'm glad you figured it out! @allcontributors[bot] please add @stephenkoo for questions and examples

[allcontributors]

@sw-yx

I've put up a pull request to add @stephenkoo! 🎉