npmpackage.info

Gathering detailed insights and metrics for @react-md/link

Other packages similar to @react-md/link

@smart-link/md-doc-starter

0.7.4

A markdown document lib that help for SmartLink JS micro frontends framework

Gathering detailed insights and metrics for @react-md/link

@react-md/link - 5.1.6 | npmpackage.info

@react-md/link

React material design - An accessible React component library built from the Material Design guidelines in Sass

5.1.6

2,337

MIT

TypeScript

62.76 kB

4.6

Installations

npm install @react-md/link

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

18.18.0

NPM Version

lerna/4.0.0/node@v18.18.0+x64 (linux)

Pull Requests

Open

0

Total

741

Closed

315

Merged

426

Issues

Open

17

Total

722

Closed

705

Releases

194

@react-md/core@6.3.1

Updated on Jul 11, 2025

@react-md/core@6.3.0

Updated on Jul 04, 2025

@react-md/core@6.2.1

Updated on Jul 03, 2025

@react-md/core@6.2.0

Updated on Jun 13, 2025

@react-md/core@6.1.0

Updated on May 30, 2025

@react-md/core@6.0.2

Updated on May 24, 2025

View All 194 releases

Languages

TypeScript

MDX

SCSS

JavaScript

Lua

TypeScript (89.84%)

MDX (5.71%)

SCSS (4.33%)

JavaScript (0.12%)

Developer

mlaursen

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

2,337 Stars

6,519 Commits

301 Forks

53 Watchers

12 Branches

68 Contributors

Updated on Jul 17, 2025

Maintainers

View All 68 Contributors

Package Meta Information

Latest Version

5.1.6

Package Id

@react-md/link@5.1.6

Unpacked Size

62.76 kB

Size

14.16 kB

File Count

NPM Version

lerna/4.0.0/node@v18.18.0+x64 (linux)

Node Version

18.18.0

Published on

Dec 11, 2023

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

@react-md/link

Create simple links from react-md with a customizable theme. The provided Link component can easily integrate with react-router, @reach/router, and theoretically any other routing library if needed.

This package also exports a great screen-reader and keyboard accessibility helper: SkipToMainContent that will allow a user to immediately jump to the main content of the page.

Installation

1npm install --save @react-md/link

It is also recommended to install the following packages to the full experience.

1npm install --save @react-md/theme @react-md/typography

Documentation

You should check out the full documentation for live examples and more customization information, but an example usage is shown below.

Usage

Usage with react-router

1import type { ReactElement } from "react";
2import { render } from "react-dom";
3import {
4  Link as ReactRouterLink,
5  LinkProps as ReactRouterLinkProps,
6  BrowserRouter,
7  Routes,
8  Route,
9} from "react-router-dom";
10import { Link as ReactMDLink, LinkProps as RMDLinkProps } from "@react-md/link";
11
12export type LinkProps = RDMLinkProps & ReactRouterLinkProps;
13
14function Link(props: linkProps): ReactElement {
15  return <ReactMDLink {...props} component={ReactRouterLink} />;
16}
17
18function Home(): ReactElement {
19  return <h1>Home page!</h1>;
20}
21
22function About(): ReactElement {
23  return <h1>About page!</h1>;
24}
25
26function App(): ReactElement {
27  return (
28    <BrowserRouter>
29      <Link to="/">Home</Link>
30      <Link to="/about">About</Link>
31
32      <Routes>
33        <Route path="/" element={<Home />} />
34        <Route path="about" element={<About />} />
35      </Routes>
36    </BrowserRouter>
37  );
38}
39
40render(<App />, document.getElementById("root"));

SkipToMainContent

If you are using the @react-md/layout package, this component is already built-in to help out! However, this component can also be used within full page dialogs or custom screens to be able to jump to a specific element in the page.

1import type { ReactElement } from "react";
2import { render } from "react-dom";
3import {
4  Dialog,
5  DialogHeader,
6  DialogContent,
7  DialogFooter,
8} from "@react-md/dialog";
9import { SkipToMainContent } from "@react-md/link";
10
11const noop = (): void => {};
12
13function App(): ReactElement {
14  return (
15    <Dialog
16      id="full-page-dialog"
17      aria-labelledby="full-page-dialog-title"
18      visible
19      onRequestClose={noop}
20    >
21      <DialogHeader>
22        <SkipToMainContent mainId="full-page-dialog-content" />
23        {/* pretend 100 focusable things before main content */}
24      </DialogHeader>
25      <DialogContent id="full-page-dialog-content">
26        <p>Here is some content</p>
27      </DialogContent>
28    </Dialog>
29  );
30}
31
32render(<App />, document.getElementById("root"));

No vulnerabilities found.

10

Maintained

Determines if the project is "actively maintained".

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

10

SAST

Determines if the project uses static code analysis.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

2

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 2

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yml:58: update your workflow using https://app.stepsecurity.io/secureworkflow/mlaursen/react-md/codeql-analysis.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yml:62: update your workflow using https://app.stepsecurity.io/secureworkflow/mlaursen/react-md/codeql-analysis.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yml:90: update your workflow using https://app.stepsecurity.io/secureworkflow/mlaursen/react-md/codeql-analysis.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/label.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/mlaursen/react-md/label.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/mlaursen/react-md/main.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/main.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/mlaursen/react-md/main.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:25: update your workflow using https://app.stepsecurity.io/secureworkflow/mlaursen/react-md/main.yml/main?enable=pin
Warn: containerImage not pinned by hash: examples/react-router-framework-mode/Dockerfile:1
Warn: containerImage not pinned by hash: examples/react-router-framework-mode/Dockerfile:6
Warn: containerImage not pinned by hash: examples/react-router-framework-mode/Dockerfile:11
Warn: containerImage not pinned by hash: examples/react-router-framework-mode/Dockerfile:17: pin your Docker image by updating node:20-alpine to node:20-alpine@sha256:fa316946c0cb1f041fe46dda150f3085b71168555e5706ec0c7466a5bae12244
Info: 0 out of 6 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 1 third-party GitHubAction dependencies pinned
Info: 0 out of 4 containerImage dependencies pinned
Info: 2 out of 2 npmCommand dependencies pinned

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

4.6

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to @react-md/link

Other packages similar to @react-md/link

@react-md/link

Installations

Developer Guide

Yes

CommonJS

18.18.0

lerna/4.0.0/node@v18.18.0+x64 (linux)

Pull Requests

0

741

315

426

Issues

17

722

705

Releases

Languages

Developer

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

@react-md/link

Installation

Documentation

Usage

Usage with react-router

SkipToMainContent

10

10

10

10

10

2

0

0

0

0

0

0

4.6

/10