Add ability to use a custom component with <Link>

[glafarge]

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!

[jessarcher]

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]

@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).