fix: restore default `React.AnchorHTMLAttributes` props on `<PrismicLink>`

[angeloashmore]

Types of changes

• [ ] Chore (a non-breaking change which is related to package maintenance)
• [x] Bug fix (a non-breaking change which fixes an issue)
• [ ] New feature (a non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to change)

Description

This PR restores the default React.AnchorHTMLAttributes props on <PrismicLink>. This brings back support for common props like className and onClick.

See #145 for more details.

---

If you use <PrismicLink> with a component that does not behave like <a> (for example, it does not accept props for className or onClick), the following strategies can be used in your project.

In all three strategies, you would use a custom <PrismicLink> implementation built off <PrismicLink> provided by @prismicio/react.

1. Custom <PrismicLink> using global configuration and TypeScript 4.7 Instantiation Expressions

(Note: This assumes PrismicLink is configured globally via <PrismicProvider> to render <Link> for internal links.)

You can take advantage of TypeScript 4.7's Instantiation Expressions feature to define a custom instance of <PrismicLink> specific to your internal and external link React components.

react-router-dom's <Link> is used as an example below, but this could be any component.

// src/components/PrismicLink.tsx

import { PrismicLink as PrismicLinkBase } from "@prismicio/react";
import { Link } from "react-router-dom";

export const PrismicLink = PrismicLinkBase<typeof Link>;

TypeScript 4.7 is currently in beta, and we cannot expect users to always be using the latest version of TypeScript. As such, this solution will not apply to everyone.

2. Custom <PrismicLink> using global configuration and type parameters in JSX

(Note: This assumes PrismicLink is configured globally via <PrismicProvider> to render <Link> for internal links.)

Similar to the above solution, a custom instance of <PrismicLink> can be created with the correct generic. This does not rely on bleeding-edge TypeScript features.

// src/components/PrismicLink.tsx

import {
  PrismicLink as PrismicLinkBase,
  PrismicLinkProps,
} from "@prismicio/react";
import { Link } from "react-router-dom";

export const PrismicLink = (props: PrismicLinkProps<typeof Link>) => (
  <PrismicLinkBase<typeof Link> {...props} />
);

3. Custom <PrismicLink> using non-global configuration

(Note: This assumes PrismicLink is not configured globally via <PrismicProvider> to render <Link> for internal links.)

Alternatively, a custom PrismicLink instance could be configured by passing the internal/external React components directly. This ignores any global configuration provided to <PrismicProvider>.

// src/components/PrismicLink.tsx

import {
  PrismicLink as PrismicLinkBase,
  PrismicLinkProps,
} from "@prismicio/react";
import { Link } from "react-router-dom";

export const PrismicLink = (props: PrismicLinkProps<typeof Link>) => (
  <PrismicLinkBase internalComponent={Link} {...props} />
);

Checklist:

• [ ] My change requires an update to the official documentation.
• [x] All TSDoc comments are up-to-date and new ones have been added where necessary.
• [x] All new and existing tests are passing.

[codecov-commenter]

Codecov Report

Merging #146 (f088e1a) into master (7a93f69) will not change coverage. The diff coverage is n/a.

@@           Coverage Diff           @@
##           master     #146   +/-   ##
=======================================
  Coverage   92.06%   92.06%           
=======================================
  Files          18       18           
  Lines         315      315           
  Branches       74       74           
=======================================
  Hits          290      290           
  Misses          5        5           
  Partials       20       20           

Impacted Files	Coverage Δ
src/PrismicLink.tsx	94.73% <ø> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update 7a93f69...f088e1a. Read the comment docs.

[github-actions[bot]]

size-limit report 📦

Path	Size
dist/index.js	5.23 KB (0%)
dist/index.cjs	6.75 KB (0%)