npmpackage.info

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

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

@react-md/alert

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

5.1.6

2,339

MIT

TypeScript

171.15 kB

4.6

Installations

npm install @react-md/alert

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,339 Stars

6,519 Commits

301 Forks

53 Watchers

12 Branches

68 Contributors

Updated on Jul 11, 2025

Maintainers

View All 68 Contributors

Package Meta Information

Latest Version

5.1.6

Package Id

@react-md/alert@5.1.6

Unpacked Size

171.15 kB

Size

32.63 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/alert

Create accessible alerts that can be displayed to users in your app. This package provides a MessageQueue for showing messages and a useAddMessage hook to push alerts into the queue.

Installation

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

It is generally recommended to also install the following packages since they work hand-in-hand with this package:

1npm install --save @react-md/theme \
2  @react-md/typography \
3  @react-md/button

Documentation

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

Usage

src/index.tsx

1import { render } from "react-dom";
2import { MessageQueue } from "@react-md/alert";
3
4import App from "./App";
5
6render(
7  <MessageQueue id="main-alerts">
8    <App />
9  </MessageQueue>,
10  document.getElementById("root")
11);

src/App.tsx

1import type { ReactElement } from "react";
2import { useAddMessage } from "@react-md/alert";
3import { Button } from "@react-md/button";
4
5function App(): ReactElement {
6  const addMessage = useAddMessage();
7
8  return (
9    <Button
10      id="button-1"
11      onClick={() => addMessage({ children: "Example Message" })}
12    >
13      Show Message
14    </Button>
15  );
16}
17
18export default App;

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

@react-md/alert

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/alert

Installation

Documentation

Usage

10

10

10

10

10

2

0

0

0

0

0

0

4.6

/10