Link

Link is an injection component that adds external resources to the preview iframe. It renders nothing in the React tree but injects a <link> tag into the iframe's document. Commonly used for external stylesheets, fonts, or other linked resources.

import { Link } from '@codespark/react';

Basic Usage

Pass the Link component as a child of Codespark or CodesparkPreview:

import { , ,  } from '@codespark/react';

const  = `export default function App() {
  return (
    <div className="font-dancing text-3xl text-center p-4">
      Beautiful Custom Font
    </div>
  );
}`;

export default function () {
  return (
    < ={}>
      <
        ="stylesheet"
        ="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap"
      />
      <>{`.font-dancing { font-family: 'Dancing Script', cursive; }`}</>
    </>
  );
}

Props

Link accepts all standard HTML <link> attributes:

rel

Relationship between the current document and the linked resource.

Type	Default	Since
`string`	-	v1.0.0

Common values:

'stylesheet' - External CSS file
'preconnect' - Preconnect to a server
'prefetch' - Prefetch a resource
'icon' - Favicon

< ="stylesheet" ="https://example.com/styles.css" />

href

URL of the linked resource.

Type	Default	Since
`string`	-	v1.0.0

< ="stylesheet" ="https://example.com/styles.css" />

type

MIME type of the linked resource.

Type	Default	Since
`string`	-	v1.0.0

< ="stylesheet" ="text/css" ="https://example.com/styles.css" />

media

Media query for the linked resource.

Type	Default	Since
`string`	-	v1.0.0

<
  ="stylesheet"
  ="https://example.com/print.css"
  ="print"
/>

crossOrigin

CORS setting for the request.

Type	Default	Since
`'anonymous' \| 'use-credentials'`	-	v1.0.0

<
  ="stylesheet"
  ="https://example.com/styles.css"
  ="anonymous"
/>

Other Attributes

Any other valid <link> HTML attributes are also supported.

Use Cases

External Stylesheets

<>
  < ="stylesheet" ="https://cdn.example.com/library.css" />
</>

Google Fonts

<>
  < ="preconnect" ="https://fonts.googleapis.com" />
  < ="preconnect" ="https://fonts.gstatic.com" ="anonymous" />
  <
    ="stylesheet"
    ="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
  />
</>

Icon Libraries

<>
  <
    ="stylesheet"
    ="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css"
  />
</>

CSS Frameworks

<>
  <
    ="stylesheet"
    ="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
  />
</>

Preconnect for Performance

<>
  < ="preconnect" ="https://api.example.com" />
  < ="dns-prefetch" ="https://cdn.example.com" />
</>

Complete Font Example

Here's a complete example loading a custom Google Font:

import { , ,  } from '@codespark/react';

const  = `export default function App() {
  return (
    <div className="space-y-4 p-4">
      <h1 className="font-playfair text-3xl font-bold">
        Elegant Typography
      </h1>
      <p className="font-inter text-gray-600">
        Mix different fonts for headings and body text.
      </p>
    </div>
  );
}`;

const  = `
.font-playfair { font-family: 'Playfair Display', serif; }
.font-inter { font-family: 'Inter', sans-serif; }
`;

export default function () {
  return (
    < ={}>
      < ="preconnect" ="https://fonts.googleapis.com" />
      < ="preconnect" ="https://fonts.gstatic.com" ="anonymous" />
      <
        ="stylesheet"
        ="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Playfair+Display:wght@700&display=swap"
      />
      <>{}</>
    </>
  );
}

Loading Order

Links are injected into the iframe's <head> element before the preview renders. External stylesheets load asynchronously, so there may be a brief flash of unstyled content (FOUC) for large stylesheets.

Performance Tip

Use rel="preconnect" for domains you'll load resources from to improve loading performance.

On this page