openedx / openedx/paragon

[paragon-openedx.netlify.app] `Hyperlink` should be compatible with React Router `Link`

Open
#3,050 0 comments 1 reaction 0 assignees View on GitHub

A pull request for this has already been merged.

  • #3082 by @adamstankiewicz — merged
good first issue
Dominant language
JavaScript
Stars
140
Forks
100
Avg merge
1h 3m
Merged PRs (30d)
30

Description

Improvements

Hyperlink is currently always a wrapper around the standard HTML anchor tag (i.e., <a>). As a result, it is not currently possible to use the Hyperlink component with a React Router Link for internal page routes within React applications.

Given this, consumers implementing links to internal page routes typically rely on Link directly, accepting a tradeoff that the Hyperlink component's built-in color and link variants are not applicable to the internal route link.

To mitigate this, Hyperlink should be extended to support an as prop similar to other components throughout the Paragon component library. This addition would allow consumers to render <Hyperlink as={Link} ... /> and still have consistently styled links even when the link used React routing for an internal page route.

### Tasks
- [ ] Ensure `Hyperlink` accepts an `as` prop such that consumers can rely on React Router's `Link` component, i.e. `<Hyperlink as={Link} destination="..." />`.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by locating the Hyperlink component and inspect how other Paragon components implement an as prop. Verify that rendering it with React Router's Link preserves the existing color and link variants; the linked pull request #3082 is merged and should be checked for context.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.