Dynamic Tag Name Props in React (with TypeScript) about aleksandrhovhannisyan.com HOT 11 OPEN

@equinusocio Yeah, unfortunately, that won't work as far as I can tell. You'll need to use a slot or render prop if the tag is being used for more than just decorative/wrapping purposes and needs additional props/attributes. That way, the consumer of your component can customize the rendered element as needed.

from aleksandrhovhannisyan.com.

@surjithctly I've had to do that before too. You have two options:

1. The component accepts a level prop of 1 | 2 | 3 | ... | 6. (Preferred.)
2. The component accepts a string prop of 'h1' | 'h2' | 'h3' | ... | 'h6'.

If you go with option 1, you can interpolate the number in a string and assert the type as an element. Same for option 2.

from aleksandrhovhannisyan.com.

Thank you for this tut! Unfortunately this solution doesn't cover the type validation of attributes.
If i set the tagName as "button" and i add the type="button" attribute it doesn't recognise it and throw a type validation error

from aleksandrhovhannisyan.com.

Also, it doesn't cover the case when you want to assign an onClick handler

from aleksandrhovhannisyan.com.

@lianulloa Yup! Like I mentioned above, if the rendered element needs to have any props passed to it, then a tag name won't work (because your click event's typing depends on the underlying element type, and that's dynamic—unless you do a type assertion for every possibility, which you should never try to do). What you're looking for is a ReactNode slot in this case. Then, you can easily pass along an onClick handler and just render the slot in your component.

from aleksandrhovhannisyan.com.

If I'm doing a <Heading> component, how do I restrict to use h1, h2 ... h6 only? instead of every html tag?

from aleksandrhovhannisyan.com.

@AleksandrHovhannisyan

• Microsoft support dynamic tag in FluentUI v9. You can check it here
• Drawback: it hard to get props and it remove ref, very tricky

from aleksandrhovhannisyan.com.

@AleksandrHovhannisyan
Another dynamic tag come from react.js beta page. It used to style Heading in MDX page. Because heading can be h1 h2 h3 h4 tag. The drawback is it doesn't runtime error check like FluentUi, but it easy to understand

from aleksandrhovhannisyan.com.

In this case, I want to pass a Component to "as" props and by some way it can detect and suggest (autocomplete) props of this component. What do I have to do to be like that?

Example:

import Button from "...."

function Parent() {
     return <AnotherComponentNotHaveButtonProps as={Button} propsColorOfButton="white" />
}

from aleksandrhovhannisyan.com.

@duongductrong Why not just pass the component with its props directly as a slot?

import Button from "...."

function Parent() {
     return <Component slotName={<Button propsColorOfButton="white" />} />
}

Then type slotName as ReactNode.

from aleksandrhovhannisyan.com.

@AleksandrHovhannisyan I want Component extends props of another ReactNode. Because I use nextjs and default we have component for navigation between the pages. So, if the Component can be extends any component props, then i can use their props in legacy form.

import Link from 'next/link'

export interface ButtonProps {

}

const Button : FC<ButtonProps> = ({ as: Tag = "button", children, ...props }) => {
    return <Tag {...props}>{children}</Tag> 
}

const App = ({ ...props }) => {
    return <Button as={Link} href="your-page">To another page</Button>
}

from aleksandrhovhannisyan.com.