Skip to content

Conversation

@glafarge
Copy link

Adding the option to use either a string or a React component as a rendering option for <Link> component using as attribute.
This allows for greater customization, as seen in the examples below:

Use HTML tag as a wrapper
(current implementation)

import { Link } from '@inertiajs/react'

<Link href="/logout" method="post" as="button" type="button">Logout</Link>

// Renders as... 
<button type="button">Logout</button>

Use a custom component

import { Link } from '@inertiajs/react'
import { MyCustomButton } from "./buttons/my-custom-button";

<Link href="/logout" method="post" as={MyCustomButton} foo="bar">Logout</Link>

// Renders as... 
<MyCustomButton foo="bar">Logout</MyCustomButton>

This addresses issue #1082 and improves overall functionality.
Any feedback or suggestions for improvement are welcomed!

Implemented the ability to pass either a string or a React component to the Link component for rendering.
@jessarcher
Copy link
Member

Wouldn't it be cleaner to make MyCustomButton wrap the Link component so that you don't need two imports when using it? The button component could conditionally render a Link or button depending on whether the href prop has been provided.

@mathieutu
Copy link
Contributor

mathieutu commented Mar 19, 2023

@jessarcher Same issue here.
I have a basic PrimaryButton component.
I use it for different usages, and sometimes I would like to use it as a Inertia Link. It make sense to me to be able to pass Link in its as props. It's also the pretty standard behavior of such as props. (example with EmotionCSS or HeadlessUI).

@pedroborges
Copy link
Contributor

Thank you for your contribution, @glafarge! We really appreciate your effort in adding this functionality. We've decided to proceed with #1940, which provides the same feature.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants