npmpackage.info

Gathering detailed insights and metrics for react-mm-jsr

react-mm-jsr

Range input solution without dependencies

2.0.4

LGPL-3.0

TypeScript

5.98 kB

785 2.8

Installations

npm install react-mm-jsr

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

14.16.1

NPM Version

6.14.12 Score

58.7

Supply Chain

92.7

Quality

74.9

Maintenance

100

Vulnerability

80.6

License

Pull Requests

Open

2

Total

62

Closed

11

Merged

49

Issues

Open

10

Total

77

Closed

67

Releases

Unable to fetch releases

Contributors

Unable to fetch Contributors

View all 5 contributors

Languages

TypeScript

Svelte

HTML

JavaScript

CSS

TypeScript (61.37%)

Svelte (20.52%)

HTML (6.96%)

JavaScript (5.79%)

CSS (5.36%)

Developer

soanvig

Download Statistics

Total Downloads

785

Last Day

Last Week

Last Month

Last Year

103

GitHub Statistics

56 Stars

512 Commits

16 Forks

5 Watching

4 Branches

5 Contributors

Maintainers

Package Meta Information

Latest Version

2.0.4

Package Id

react-mm-jsr@2.0.4

Unpacked Size

5.98 kB

Size

3.05 kB

File Count

NPM Version

6.14.12

Node Version

14.16.1

Total Downloads

Cumulative downloads

Total Downloads

785

Last day

Compared to previous day

Last week

300%

Compared to previous week

Last month

80%

Compared to previous month

Last year

-25.4%

103

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

react-mm-jsr

Official adapter for mm-jsr. Visit link for more information about library.

mm-jsr provides You with excellent solution for creating so-called range-inputs.

Range input is form's field where one can choose a value from min-max range. Although HTML 5 comes with input[type="range"] its functionality lacks a lot of features. mm-jsr gives You anything You may need.

Installation

Install packages

npm install --save mm-jsr react-mm-jsr

or

yarn add mm-jsr react-mm-jsr

(it is also available in unpkg with variable name ReactJSR. Remember to include mm-jsr (JSR) as well)

Add CSS (you can use basic styles from here)
Instantiate (see docs for more information about configuration and modules)

1import JSR from 'mm-jsr';
2import { useJSR } from 'react-mm-jsr';
3
4function MyComponent () {
5  const { ref: jsrRef, instance: jsrInstance } = useJSR({
6    modules: [
7      new JSR.Rail(),
8      new JSR.Slider(),
9      new JSR.Bar(),
10      new JSR.Label(),
11    ],
12    config: {
13      min: 0,
14      max: 100,
15      step: 1,
16      initialValues: [25, 75],
17    },
18  });
19
20  return (<div ref={jsrRef} />);
21}

Important notes

instance returned from useJSR is not available immediately, because JSR mounts itself after component. Underhood it uses useState for storing instance.

Therefore each usage must check for instance existence, and usage in hooks have to use instance as dependency.

Handling onValueChange

To handle onValueChange you may use this code

1useEffect(() => {
2  if (jsrInstance) {
3    return jsrInstance.onValueChange(console.log);
4  }
5}, [jsrInstance]);

As onValueChange returns function, that will unsubscribe the handler, it can be used naturally with React's useEffect.

Styling

Because you mount JSR by using ref, you have full control over JSR parent element.

So by applying class to that element, and then wrapping default styles with applied class, you can have styled and scoped JSR.

The same works for styled-components:

1const JsrContainer = styled.div`
2    display: block;
3    position: relative;
4    padding-top: 10px;
5    width: 100%;
6    ...
7
8    .jsr_rail {
9      height: 5px;
10      background: #444;
11    }
12
13    ...
14`;

NOTE: .jsr class is the container element itself.

NOTE: .jsr_lockscreen is applied to body, so it should be global. See docs on locking screen on touchevent for more info.

No vulnerabilities found.

10

Dangerous-Workflow

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

10

Binary-Artifacts

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

10

License

Determines if the project has defined a license.

0

Code-Review

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

0

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

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

0

CII-Best-Practices

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

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

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 0

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr-jsr.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/soanvig/mm-jsr/pr-jsr.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr-jsr.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/soanvig/mm-jsr/pr-jsr.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr-jsr.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/soanvig/mm-jsr/pr-jsr.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr-jsr.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/soanvig/mm-jsr/pr-jsr.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr-react.yml:10: update your workflow using https://app.stepsecurity.io/secureworkflow/soanvig/mm-jsr/pr-react.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr-react.yml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/soanvig/mm-jsr/pr-react.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-jsr.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/soanvig/mm-jsr/release-jsr.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-jsr.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/soanvig/mm-jsr/release-jsr.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-jsr.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/soanvig/mm-jsr/release-jsr.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-jsr.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/soanvig/mm-jsr/release-jsr.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/release-jsr.yml:41: update your workflow using https://app.stepsecurity.io/secureworkflow/soanvig/mm-jsr/release-jsr.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-react.yml:24: update your workflow using https://app.stepsecurity.io/secureworkflow/soanvig/mm-jsr/release-react.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-react.yml:27: update your workflow using https://app.stepsecurity.io/secureworkflow/soanvig/mm-jsr/release-react.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/release-react.yml:40: update your workflow using https://app.stepsecurity.io/secureworkflow/soanvig/mm-jsr/release-react.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-react.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/soanvig/mm-jsr/release-react.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-react.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/soanvig/mm-jsr/release-react.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/size-limit.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/soanvig/mm-jsr/size-limit.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/size-limit.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/soanvig/mm-jsr/size-limit.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/webpage.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/soanvig/mm-jsr/webpage.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/webpage.yml:33: update your workflow using https://app.stepsecurity.io/secureworkflow/soanvig/mm-jsr/webpage.yml/master?enable=pin
Info: 0 out of 16 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 4 third-party GitHubAction dependencies pinned

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

2.8

/10

Last Scanned on 2024-12-23

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-mm-jsr

Installations

Developer Guide

Yes

CommonJS

14.16.1

6.14.12

Score

Pull Requests

2

62

11

49

Issues

10

77

67

Releases

Unable to fetch releases

Contributors

Unable to fetch Contributors

Languages

Developer

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

785

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

Dev Dependencies

react-mm-jsr

Installation

Important notes

Handling onValueChange

Styling

10

10

10

0

0

0

0

0

0

0

0

0

2.8

/10