Gathering detailed insights and metrics for @uiw/react-color-colorful
Gathering detailed insights and metrics for @uiw/react-color-colorful
Installations
npm install @uiw/react-color-colorfulScore
87.4
Supply Chain
93.3
Quality
84.4
Maintenance
100
Vulnerability
100
License
Developer
Developer Guide
BETA
Module System
CommonJS
Min. Node Version
Typescript Support
Yes
Node Version
20.17.0
NPM Version
10.8.2
Statistics
300 Stars
452 Commits
101 Forks
4 Watching
7 Branches
14 Contributors
Updated on 25 Nov 2024
Bundle Size
9.76 kB
Minified
3.79 kB
Minified + Gzipped
Languages
TypeScript (98.29%)
HTML (1.02%)
CSS (0.65%)
Less (0.04%)
Total Downloads
Cumulative downloads
Total Downloads
877,027
Last day
-0.4%
5,083
Compared to previous day
Last week
-3.1%
25,381
Compared to previous week
Last month
11.3%
107,640
Compared to previous month
Last year
585.1%
738,588
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
4
Peer Dependencies
3
Dev Dependencies
1
Versions
React Color
react-color is a tiny color picker widget component for React apps. These components can be installed and used separately.
Getting Started
1npm i @uiw/react-color
1import { Slider, Sketch, Material, Colorful, Compact, Circle, Wheel, Block, Github, Chrome } from '@uiw/react-color'; 2import { Alpha, Hue, ShadeSlider, Saturation, Interactive, hsvaToHslaString } from '@uiw/react-color'; 3import { EditableInput, EditableInputRGBA, EditableInputHSLA } from '@uiw/react-color'; 4 5function Demo() { 6 const [hex, setHex] = useState("#fff"); 7 return ( 8 <Sketch 9 style={{ marginLeft: 20 }} 10 color={hex} 11 onChange={(color) => { 12 setHex(color.hex); 13 }} 14 /> 15 ); 16}
Support dark/night Theme
1[data-color-mode*='dark'] .w-color-sketch { 2 --sketch-background: #323232 !important; 3} 4 5[data-color-mode*='dark'] .w-color-swatch { 6 --sketch-swatch-border-top: 1px solid #525252 !important; 7} 8 9[data-color-mode*='dark'] .w-color-block { 10 --block-background-color: #323232 !important; 11 --block-box-shadow: rgb(0 0 0 / 10%) 0 1px !important; 12} 13 14[data-color-mode*='dark'] .w-color-editable-input { 15 --editable-input-label-color: #757575 !important; 16 --editable-input-box-shadow: #616161 0px 0px 0px 1px inset !important; 17 --editable-input-color: #bbb !important; 18} 19 20[data-color-mode*='dark'] .w-color-github { 21 --github-border: 1px solid rgba(0, 0, 0, 0.2) !important; 22 --github-background-color: #323232 !important; 23 --github-box-shadow: rgb(0 0 0 / 15%) 0px 3px 12px !important; 24 --github-arrow-border-color: rgba(0, 0, 0, 0.15) !important; 25} 26 27[data-color-mode*='dark'] .w-color-compact { 28 --compact-background-color: #323232 !important; 29} 30 31[data-color-mode*='dark'] .w-color-material { 32 --material-background-color: #323232 !important; 33 --material-border-bottom-color: #707070 !important; 34} 35 36[data-color-mode*='dark'] .w-color-alpha { 37 --alpha-pointer-background-color: #6a6a6a !important; 38 --alpha-pointer-box-shadow: rgb(0 0 0 / 37%) 0px 1px 4px 0px !important; 39}
Documentation
You can find the react-color documentation on the website.
Packages
Base Components
Development
1npm install # Installation dependencies 2npm run build # Compile all package
1cd packages/color-block 2# listen to the component compile and output the .js file 3# listen for compilation output type .d.ts file 4npm run watch # Monitor the compiled package `@uiw/react-block`
1npm run start # development mode, listen to compile preview website instance
Contributors
As always, thanks to our amazing contributors!
Made with contributors.
License
Licensed under the MIT License.
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
0 existing vulnerabilities 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/ci.yml:8
Reason
8 commit(s) and 3 issue activity found in the last 90 days -- score normalized to 9
Reason
Found 7/29 approved changesets -- score normalized to 2
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/ci.yml:1
- Warn: no topLevel permission defined: .github/workflows/pr.yml:1
- Info: no jobLevel write permissions found
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/uiwjs/react-color/ci.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/uiwjs/react-color/ci.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:28: update your workflow using https://app.stepsecurity.io/secureworkflow/uiwjs/react-color/ci.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/uiwjs/react-color/ci.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:63: update your workflow using https://app.stepsecurity.io/secureworkflow/uiwjs/react-color/ci.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:69: update your workflow using https://app.stepsecurity.io/secureworkflow/uiwjs/react-color/ci.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:72: update your workflow using https://app.stepsecurity.io/secureworkflow/uiwjs/react-color/ci.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:80: update your workflow using https://app.stepsecurity.io/secureworkflow/uiwjs/react-color/ci.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:88: update your workflow using https://app.stepsecurity.io/secureworkflow/uiwjs/react-color/ci.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr.yml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/uiwjs/react-color/pr.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/uiwjs/react-color/pr.yml/main?enable=pin
- Warn: npmCommand not pinned by hash: .github/workflows/ci.yml:21
- Warn: npmCommand not pinned by hash: .github/workflows/ci.yml:23
- Warn: npmCommand not pinned by hash: .github/workflows/pr.yml:16
- Warn: npmCommand not pinned by hash: .github/workflows/pr.yml:18
- Info: 0 out of 4 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 7 third-party GitHubAction dependencies pinned
- Info: 0 out of 4 npmCommand dependencies pinned
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
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
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 8 are checked with a SAST tool
Score
5.3
/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