Gathering detailed insights and metrics for react-refractor
Gathering detailed insights and metrics for react-refractor
Syntax highlighter for React based on Prism/refractor, utilizing VDOM for efficient updates
Installations
npm install react-refractorDeveloper
Developer Guide
BETA
Module System
ESM
Min. Node Version
>=18.0.0
Typescript Support
Yes
Node Version
20.12.1
NPM Version
10.5.1
Statistics
72 Stars
58 Commits
5 Forks
2 Watching
4 Branches
5 Contributors
Updated on 14 Nov 2024
Languages
TypeScript (100%)
Total Downloads
Cumulative downloads
Total Downloads
11,994,907
Last day
-4.6%
23,497
Compared to previous day
Last week
8.5%
133,496
Compared to previous week
Last month
10.2%
556,401
Compared to previous month
Last year
56.3%
5,178,061
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
3
Peer Dependencies
1
Dev Dependencies
21
@babel/cli@babel/core@babel/preset-env@sanity/pkg-utils@sanity/semantic-release-preset@types/react@types/react-dom@typescript-eslint/eslint-plugin@typescript-eslint/parser@vitejs/plugin-reacteslinteslint-config-prettiereslint-config-sanityprettierreactreact-domrimrafsemantic-releasetypescriptvitevitest
Versions
react-refractor
Syntax highlighter for React, utilizing VDOM for efficient updates
- Thin wrapper on top of refractor (Syntax highlighting using VDOM)
- refractor uses Prism under the hood, thus supports all the same syntaxes
- About 14kB minified + gziped when using a single language syntax. Languages tend to add a bit of weight, see unpkg for some pointers on how much.
Feel free to check out a super-simple demo.
Installation
This package is ESM only and requires React 18 or higher.
npm install --save react-refractor
Usage
1import {Refractor, registerLanguage} from 'react-refractor' 2 3// Load any languages you want to use from `refractor` 4import js from 'refractor/lang/javascript.js' 5import php from 'refractor/lang/php.js' 6 7// Then register them 8registerLanguage(js) 9registerLanguage(php) 10 11ReactDOM.render( 12 <Refractor language="js" value="/* Code to highlight */" />, 13 document.getElementById('target'), 14)
You'll need to register the languages you want to use - I've intentionally left all languages out of the default bundle in order to reduce the bundle size out of the box. Load and register them from refractor using something like this:
1import docker from 'refractor/lang/docker' 2 3registerLanguage(docker)
Styling
Stylesheets are not automatically handled for you - but there is a bunch of premade themes for Prism which you can simply drop in and they'll "just work". You can either grab these from the source, of pull them in using a CSS loader - whatever works best for you. You can also download a customized stylesheet from Prism's download customizer.
Note that when using the markers feature, there is an additional class name called refractor-marker which is not defined by Prism, as it's not a part of its feature set. You can either set it yourself, or you can explicitly set class names on markers.
Props
| Name | Description |
|---|---|
className | Class name for the outermost pre tag. Default: refractor |
language | Language to use for syntax highlighting this value. Must be registered prior to usage |
value | The code snippet to syntax highlight |
inline | Whether code should be displayed inline (no <pre> tag, sets display: inline) |
markers | Array of lines to mark. See section on markers below |
plainText | Set to true to skip highlighting and render the passed value as-is |
Differences to Prism
Prism.js operates directly on the DOM, while refractor generates an AST which react-refractor walks over and converts into virtual DOM nodes. The benefit of the AST approach is that we can easily reuse this across different platforms, highlight on both the server and the client using the same code base and benefit from Reacts virtual DOM diff algorithm to only update the nodes that change.
The drawback to this approach is that you cannot use Prism plugins, since they also work and depend directly on the DOM.
Markers
It's quite common to want to highlight lines when doing syntax highlighting, but Prism uses a very DOM-centric approach to achieve this. In order to make up for this, react-refractor provides a custom plugin that lets you define "markers". Since this is a non-standard feature, you will have to provide your own styling for the refractor-marker class name. To highlight lines, simply provide the line numbers in the markers property:
1const source = ` 2const foo = 'bar' 3const bar = 'foo' 4const baz = foo + bar 5` 6 7// Highlight line 1 and 2, but not 3 8<Refractor 9 language="js" 10 value={source} 11 markers={[1, 2]} 12/>
You are also able to provide greater customization by specifying an object for each marker, which can include either a className or a component property. This allows you to render basically anything you want:
1const source = ` 2const foo = 'bar' 3const bar = 'foo' 4const baz = "bar" + bar 5` 6 7// Highlight line 1 and 2, but not 3 8<Refractor 9 language="js" 10 value={source} 11 markers={[ 12 {line: 1, className: 'no-not-use-foo-in-examples'}, 13 {line: 3, component: props => ( 14 <TooltipedLine tooltipText="Prefer template for string concatenation"> 15 {props.children} 16 </TooltipedLine> 17 )} 18 ]} 19/>
License
MIT-licensed. See LICENSE.
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
no dangerous workflow patterns detected
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
packaging workflow detected
Details
- Info: Project packages its releases by way of GitHub Actions.: .github/workflows/main.yml:48
Reason
6 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
- Warn: Project is vulnerable to: GHSA-64vr-g452-qvp3
- Warn: Project is vulnerable to: GHSA-9cwx-2883-4wfx
Reason
dependency not pinned by hash detected -- score normalized to 2
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:24: update your workflow using https://app.stepsecurity.io/secureworkflow/rexxars/react-refractor/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/rexxars/react-refractor/main.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:37: update your workflow using https://app.stepsecurity.io/secureworkflow/rexxars/react-refractor/main.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:38: update your workflow using https://app.stepsecurity.io/secureworkflow/rexxars/react-refractor/main.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/main.yml:44: update your workflow using https://app.stepsecurity.io/secureworkflow/rexxars/react-refractor/main.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:55: update your workflow using https://app.stepsecurity.io/secureworkflow/rexxars/react-refractor/main.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:60: update your workflow using https://app.stepsecurity.io/secureworkflow/rexxars/react-refractor/main.yml/main?enable=pin
- Warn: npmCommand not pinned by hash: .github/workflows/main.yml:43
- Warn: npmCommand not pinned by hash: .github/workflows/main.yml:30
- Info: 0 out of 6 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 1 third-party GitHubAction dependencies pinned
- Info: 1 out of 3 npmCommand dependencies pinned
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
Found 2/27 approved changesets -- score normalized to 0
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/main.yml:1
- Info: no jobLevel write permissions found
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
Project has not signed or included provenance with any releases.
Details
- Warn: release artifact v3.1.1 not signed: https://api.github.com/repos/rexxars/react-refractor/releases/150418469
- Warn: release artifact v3.1.0 not signed: https://api.github.com/repos/rexxars/react-refractor/releases/150307557
- Warn: release artifact v3.1.1 does not have provenance: https://api.github.com/repos/rexxars/react-refractor/releases/150418469
- Warn: release artifact v3.1.0 does not have provenance: https://api.github.com/repos/rexxars/react-refractor/releases/150307557
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'main'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 5 are checked with a SAST tool
Score
3.1
/10
Last Scanned on 2024-11-18
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