@aglyn/shared-ui-color-picker 1.0.0-beta.143 → 1.0.0-beta.145
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +41 -4
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,7 +1,44 @@
|
|
|
1
|
-
# shared-ui-color-picker
|
|
1
|
+
# @aglyn/shared-ui-color-picker
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A React color picker: a thin wrapper over `react-color`'s `SketchPicker` that keeps the picked color in local state and re-seeds it when the `color` prop changes. It is mainly a building block of the color field in `@aglyn/shared-ui-jsx-forms`.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
> Beta. Published from the Aglyn monorepo under the `beta` dist-tag; APIs can change between beta releases.
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
## Install
|
|
8
|
+
|
|
9
|
+
npm install @aglyn/shared-ui-color-picker@beta
|
|
10
|
+
|
|
11
|
+
Peer dependencies: `react` and `@mui/material`. `react-color` is a regular dependency and is installed with the package.
|
|
12
|
+
|
|
13
|
+
## What's in it
|
|
14
|
+
|
|
15
|
+
- `ColorPicker` and `ColorPickerProps` from the root entry. `ColorPickerProps` extends `SketchPickerProps` from `react-color` unchanged, so every `SketchPicker` prop applies (`color`, `onChange`, `onChangeComplete`, `presetColors`, `disableAlpha` and the rest). The component re-seeds its internal color whenever the `color` prop changes, and forwards its ref to the `SketchPicker`.
|
|
16
|
+
- Subpath modules, not re-exported from the root:
|
|
17
|
+
- `@aglyn/shared-ui-color-picker/color-swatch` — `ColorSwatch`
|
|
18
|
+
- `@aglyn/shared-ui-color-picker/color-grid` — `ColorGrid`
|
|
19
|
+
- `@aglyn/shared-ui-color-picker/constants/material-palettes` — `materialPalettes`, the Material Design color palettes as data
|
|
20
|
+
|
|
21
|
+
## Usage
|
|
22
|
+
|
|
23
|
+
```tsx
|
|
24
|
+
import { ColorPicker } from '@aglyn/shared-ui-color-picker'
|
|
25
|
+
import { useState } from 'react'
|
|
26
|
+
|
|
27
|
+
export function Example() {
|
|
28
|
+
const [color, setColor] = useState('#1976d2')
|
|
29
|
+
return (
|
|
30
|
+
<ColorPicker
|
|
31
|
+
color={color}
|
|
32
|
+
onChangeComplete={(result) => setColor(result.hex)}
|
|
33
|
+
/>
|
|
34
|
+
)
|
|
35
|
+
}
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
## How it fits
|
|
39
|
+
|
|
40
|
+
A `shared` UI package. It depends on `@aglyn/shared-util-tools`, and `@aglyn/shared-ui-jsx-forms` builds its color form field on it. Shared packages are generic: they import only other shared packages and hold no plugin's domain.
|
|
41
|
+
|
|
42
|
+
## License
|
|
43
|
+
|
|
44
|
+
Apache-2.0. Source: https://github.com/aglyn/aglyn/tree/main/libs/shared/ui/color-picker
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@aglyn/shared-ui-color-picker",
|
|
3
|
-
"version": "1.0.0-beta.
|
|
3
|
+
"version": "1.0.0-beta.145",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"homepage": "https://aglyn.com",
|
|
6
6
|
"repository": {
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
"./package.json": "./package.json"
|
|
25
25
|
},
|
|
26
26
|
"dependencies": {
|
|
27
|
-
"@aglyn/shared-util-tools": "1.0.0-beta.
|
|
27
|
+
"@aglyn/shared-util-tools": "1.0.0-beta.145",
|
|
28
28
|
"@swc/helpers": "0.5.23",
|
|
29
29
|
"react-color": "^2.19.3"
|
|
30
30
|
},
|