Gathering detailed insights and metrics for @uiw/react-color-swatch
Gathering detailed insights and metrics for @uiw/react-color-swatch
Gathering detailed insights and metrics for @uiw/react-color-swatch
Gathering detailed insights and metrics for @uiw/react-color-swatch
🎨 Is a tiny color picker widget component for React apps.
npm install @uiw/react-color-swatch
Typescript
Module System
Node Version
NPM Version
TypeScript (98.31%)
HTML (1%)
CSS (0.64%)
Less (0.04%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
MIT License
421 Stars
497 Commits
117 Forks
4 Watchers
9 Branches
19 Contributors
Updated on Jul 11, 2025
Latest Version
2.7.1
Package Id
@uiw/react-color-swatch@2.7.1
Unpacked Size
17.41 kB
Size
3.96 kB
File Count
7
NPM Version
10.8.2
Node Version
20.19.3
Published on
Jul 11, 2025
Cumulative downloads
Total Downloads
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
1
3
1
Swatch Component is a subcomponent of @react-color
.
1npm i @uiw/react-color-swatch
1import React, { useState } from 'react'; 2import { hsvaToHex, getContrastingColor, } from '@uiw/color-convert'; 3import Swatch from '@uiw/react-color-swatch'; 4 5function Point(props: { color?: string; checked?: boolean }) { 6 if (!props.checked) return null; 7 return ( 8 <div 9 style={{ 10 height: 5, 11 width: 5, 12 borderRadius: '50%', 13 backgroundColor: getContrastingColor(props.color!), 14 }} 15 /> 16 ); 17} 18 19function Demo() { 20 const [hex, setHex] = useState("#fff"); 21 return ( 22 <Swatch 23 colors={[ '#F44E3B', '#FE9200', '#FCDC00', '#DBDF00' ]} 24 color={hex} 25 rectProps={{ 26 children: <Point />, 27 style: { 28 display: 'flex', 29 alignItems: 'center', 30 justifyContent: 'center', 31 }, 32 }} 33 onChange={(hsvColor) => { 34 setHex(hsvaToHex(hsvColor)) 35 }} 36 /> 37 ); 38} 39 40export default Demo;
1import React from 'react'; 2import { HsvaColor, ColorResult } from '@uiw/color-convert'; 3export type SwatchPresetColor = { 4 color: string; 5 title?: string; 6} | string; 7export interface SwatchRectRenderProps extends React.HTMLAttributes<HTMLDivElement> { 8 title: string; 9 color: string; 10 checked: boolean; 11 style: React.CSSProperties; 12 onClick: (evn: React.MouseEvent<HTMLDivElement, MouseEvent>) => void; 13}; 14export interface SwatchProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'color'> { 15 prefixCls?: string; 16 color?: string; 17 colors?: SwatchPresetColor[]; 18 rectProps?: React.HTMLAttributes<HTMLDivElement>; 19 rectRender?: (props: SwatchRectRenderProps) => JSX.Element; 20 onChange?: (hsva: HsvaColor, color: ColorResult, evn: React.MouseEvent<HTMLDivElement, MouseEvent>) => void; 21 addonAfter?: React.ReactNode; 22 addonBefore?: React.ReactNode; 23} 24declare const Swatch: React.ForwardRefExoticComponent<SwatchProps & React.RefAttributes<HTMLDivElement>>; 25export default Swatch;
As always, thanks to our amazing contributors!
Made with contributors.
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
Reason
packaging workflow detected
Details
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
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
Reason
project is not fuzzed
Details
Reason
security policy file not detected
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Score
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