@particle-academy/react-fancy 3.3.0 → 3.4.1
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/dist/index.cjs +100 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +51 -2
- package/dist/index.d.ts +51 -2
- package/dist/index.js +100 -3
- package/dist/index.js.map +1 -1
- package/docs/StickyNote.md +59 -0
- package/package.json +1 -1
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
# StickyNote
|
|
2
|
+
|
|
3
|
+
A paper-styled sticky note with optional inline text editing. A presentational
|
|
4
|
+
primitive: it owns the note's look and editable text only — positioning,
|
|
5
|
+
dragging, resizing, and z-order are the consumer's responsibility. Shared by
|
|
6
|
+
`fancy-whiteboard` (`<Board>` items) and `fancy-artboard` (`<ArtBoard.Note>`).
|
|
7
|
+
|
|
8
|
+
## Import
|
|
9
|
+
|
|
10
|
+
```tsx
|
|
11
|
+
import { StickyNote } from "@particle-academy/react-fancy";
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
## Basic Usage
|
|
15
|
+
|
|
16
|
+
```tsx
|
|
17
|
+
const [text, setText] = useState("Remember the milk");
|
|
18
|
+
|
|
19
|
+
<StickyNote value={text} onChange={setText} />
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## Props
|
|
23
|
+
|
|
24
|
+
| Prop | Type | Default | Description |
|
|
25
|
+
|------|------|---------|-------------|
|
|
26
|
+
| value | `string` | — | Note text (controlled) |
|
|
27
|
+
| defaultValue | `string` | `""` | Initial text when uncontrolled |
|
|
28
|
+
| onChange | `(text: string) => void` | — | Fires when edited text is committed (on blur) |
|
|
29
|
+
| color | `"yellow" \| "blue" \| "green" \| "pink" \| "violet"` \| any CSS color | `"yellow"` | Paper color — preset or arbitrary string |
|
|
30
|
+
| rotate | `number` | `0` | Rotation in degrees |
|
|
31
|
+
| width | `number \| string` | `180` | Width (px number or CSS length) |
|
|
32
|
+
| height | `number \| string` | `"auto"` | Height (px number or CSS length) |
|
|
33
|
+
| selected | `boolean` | `false` | Selected styling (focus ring) |
|
|
34
|
+
| editable | `boolean` | `true` | Allow inline editing of the text |
|
|
35
|
+
| autoFocus | `boolean` | `false` | Focus the editable region (caret at end) when it becomes editable |
|
|
36
|
+
| id | `string` | — | Stable handle; also emitted as the element `id` |
|
|
37
|
+
| children | `ReactNode` | — | Static content; overrides the editable text |
|
|
38
|
+
|
|
39
|
+
## Examples
|
|
40
|
+
|
|
41
|
+
### Tilted colored note
|
|
42
|
+
|
|
43
|
+
```tsx
|
|
44
|
+
<StickyNote value={text} onChange={setText} color="pink" rotate={-3} width={200} />
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
### Read-only note with custom paper color
|
|
48
|
+
|
|
49
|
+
```tsx
|
|
50
|
+
<StickyNote editable={false} color="#fde68a">
|
|
51
|
+
Ship the release notes by Friday.
|
|
52
|
+
</StickyNote>
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
## Notes
|
|
56
|
+
|
|
57
|
+
- **Controlled text**: pass `value` + `onChange`; the editable region commits on blur. Press `Escape` to blur without further edits.
|
|
58
|
+
- **Stable handle**: pass `id` so agents/selectors can target a specific note (`data-react-fancy-sticky` is always present).
|
|
59
|
+
- **Positioning is yours**: wrap the note in your own draggable/absolutely-positioned container.
|