Gathering detailed insights and metrics for @uiw/react-color-alpha
Gathering detailed insights and metrics for @uiw/react-color-alpha
🎨 Is a tiny color picker widget component for React apps.
Installations
npm install @uiw/react-color-alphaDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS, ESM
Node Version
20.19.3
NPM Version
10.8.2
Releases
96
Languages
4
TypeScript
HTML
CSS
Less
TypeScript (98.31%)
HTML (1%)
CSS (0.64%)
Less (0.04%)
Developer
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
421 Stars
497 Commits
117 Forks
4 Watchers
9 Branches
19 Contributors
Updated on Jul 11, 2025
Sponsor this package
Maintainers
2
Package Meta Information
Latest Version
2.7.1
Package Id
@uiw/react-color-alpha@2.7.1
Unpacked Size
24.81 kB
Size
5.23 kB
File Count
12
NPM Version
10.8.2
Node Version
20.19.3
Published on
Jul 11, 2025
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
2
Peer Dependencies
3
Dev Dependencies
1
React Color Alpha
Alpha is a subcomponent of @react-color.
Install
1npm i @uiw/react-color-alpha
Usage
1import React, { useState } from 'react'; 2import { hsvaToRgbaString } from '@uiw/color-convert'; 3import Alpha from '@uiw/react-color-alpha'; 4 5export default function Demo() { 6 const [hsva, setHsva] = useState({ h: 0, s: 0, v: 68, a: 1 }); 7 return ( 8 <> 9 <Alpha 10 hsva={hsva} 11 onChange={(newAlpha) => { 12 setHsva({ ...hsva, ...newAlpha }); 13 }} 14 /> 15 <div style={{ background: hsvaToRgbaString(hsva), marginTop: 30, padding: 10 }}> 16 {JSON.stringify(hsva)} 17 </div> 18 </> 19 ); 20}
Props
1import React from 'react'; 2import { HsvaColor } from '@uiw/color-convert'; 3import { Interaction } from '@uiw/react-drag-event-interactive'; 4import { PointerProps } from './Pointer'; 5export * from './Pointer'; 6export interface AlphaProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> { 7 prefixCls?: string; 8 /** String, Pixel value for picker width. Default `316px` */ 9 width?: React.CSSProperties['width']; 10 /** String, Pixel value for picker height. Default `16px` */ 11 height?: React.CSSProperties['height']; 12 /** hsva => `{ h: 0, s: 75, v: 82, a: 1 }` */ 13 hsva: HsvaColor; 14 /** React Component, Custom pointer component */ 15 pointer?: (props: PointerProps) => JSX.Element; 16 /** Set rounded corners. */ 17 radius?: React.CSSProperties['borderRadius']; 18 /** Set the background color. */ 19 background?: string; 20 /** Set the background element props. */ 21 bgProps?: React.HTMLAttributes<HTMLDivElement>; 22 /** Set the interactive element props. */ 23 innerProps?: React.HTMLAttributes<HTMLDivElement>; 24 pointerProps?: PointerProps; 25 /** String Enum, horizontal or vertical. Default `horizontal` */ 26 direction?: 'vertical' | 'horizontal'; 27 onChange?: (newAlpha: { 28 a: number; 29 }, offset: Interaction) => void; 30} 31export declare const BACKGROUND_IMG = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg=="; 32declare const Alpha: React.ForwardRefExoticComponent<AlphaProps & React.RefAttributes<HTMLDivElement>>; 33export default Alpha; 34interface PointerProps extends React.HTMLAttributes<HTMLDivElement> { 35 prefixCls?: string; 36 left?: string; 37 top?: string; 38}
Contributors
As always, thanks to our amazing contributors!
Made with contributors.
License
Licensed under the MIT License.
No vulnerabilities found.
Reason
18 commit(s) and 7 issue activity found in the last 90 days -- score normalized to 10
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
Found 4/30 approved changesets -- score normalized to 1
Reason
no effort to earn an OpenSSF best practices badge detected
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
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 4 are checked with a SAST tool
Score
5.3
/10
Last Scanned on 2025-06-30
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