Here are the docs on forwardedAs prop: .

As you can see, it's not very detailed and does not show how to properly use this prop.

My question is: How can I access the props that are sent down via forwardedAs? How can I define types for these forwardedAs props?

I'm able to access the forwardedAs props via ...rest parameters, but I need to define types for these props since I am also using styled-ponents with Typescript.

Here's my code example:

// Button.jsx
const myPropsToForward = {
  href: '',
  // ...more props
}

const Button = styled.button`
  // ...button styles
`

const myComponent = () => (
  <Button
    as={Link}
    to={ctaLink}
    forwardedAs={myPropsToForward}
  />
)

// Link.jsx
const Link = ({
  forwardedAs,
  ...rest
}) => {
  // How do I access the forwardedAs prop from <Button /> here?

  return (
    <a href={forwardAs?.href} {...rest} />
  )
}

Here, I need to be able to access the props within the Link ponent sent down via forwardedAs prop, but there's no documentation on how to do that. If I can access the forwardedAs prop, I can then define proper types for the Link ponent. I do not want to rely on the ...rest parameter as I cannot define types for that.

Thank you in advance.

Here are the docs on forwardedAs prop: https://styled-ponents./docs/api#forwardedas-prop.

As you can see, it's not very detailed and does not show how to properly use this prop.

My question is: How can I access the props that are sent down via forwardedAs? How can I define types for these forwardedAs props?

I'm able to access the forwardedAs props via ...rest parameters, but I need to define types for these props since I am also using styled-ponents with Typescript.

Here's my code example:

// Button.jsx
const myPropsToForward = {
  href: 'https://somewebsite.',
  // ...more props
}

const Button = styled.button`
  // ...button styles
`

const myComponent = () => (
  <Button
    as={Link}
    to={ctaLink}
    forwardedAs={myPropsToForward}
  />
)

// Link.jsx
const Link = ({
  forwardedAs,
  ...rest
}) => {
  // How do I access the forwardedAs prop from <Button /> here?

  return (
    <a href={forwardAs?.href} {...rest} />
  )
}

Here, I need to be able to access the props within the Link ponent sent down via forwardedAs prop, but there's no documentation on how to do that. If I can access the forwardedAs prop, I can then define proper types for the Link ponent. I do not want to rely on the ...rest parameter as I cannot define types for that.

Thank you in advance.

• javascript
• reactjs
• typescript
• styled-ponents
• react-props

• lso as a bonus question, how would I define types for this forwardedAs prop on the Link ponent? – kdizzle Commented Jan 28, 2021 at 22:44

1 Answer 1

forwardedAs

The forwardedAs prop is not for passing down props. It's actually for passing down an as prop to the next item in the chain. Consider this example:

const Button = styled.button`
  padding: 20px;
`;

const Link = (props: any) => { // not properly typed
  return <Button {...props} />;
};

const MyLink = styled(Link)`
  background-color: blue;
`

const MyComponent = () => (
  <MyLink forwardedAs={"div"}>
    Text
  </MyLink>
);

We have a Button which is a styled ponent and we have a MyLink which is another styled ponent that passes its props down to the Button. If we want to set the as prop on the Button, we can set forwardedAs on MyLink.

With <MyLink forwardedAs={"div"}>, the element that we ultimately render to the DOM is a div rather than a button and it applies the styles from both styled HOCs.

Passing Props

Based on your example here, the Link ponent is not actually needed. You can set as="a" on your Button to render it as a link and pass through myPropsToForward directly.

const myPropsToForward = {
  href: "https://somewebsite."
  // ...more props
};

const Button = styled.button`
  background: yellow;
  padding: 20px;
`;

const MyComponent = () => (
  <Button as="a" {...myPropsToForward}>
    Text
  </Button>
);