Sticky Note
An interactive command-line interface modeled after macOS Terminal. Great for demos.
Basic Usage
Hello World!
React is Awesome!
Keep Coding!
Breaking Bad: 9.5
Fight Club: 8.8
Installation
Props
QRCode Component
| Name | Type | Default | Description |
|---|---|---|---|
| id | string | number | - | Unique identifier for the sticky note (required) |
| initialContent | string | "" | Initial text content displayed in the note |
| initialColor | "yellow" | "blue" | "green" | "pink" | "purple" | "yellow" | Initial background color of the note |
| initialPosition | { x: number; y: number } | { x: Math.random() * 200, y: Math.random() * 200 } | Initial position coordinates for the note |
| initialRotation | number | Math.random() * 6 - 3 | Initial rotation angle in degrees |
| editable | boolean | true | Whether the note content can be edited |
| onContentChange | (id: string | number, content: string) => void | - | Callback when note content changes |
| onPositionChange | (id: string | number, position: { x: number; y: number }) => void | - | Callback when note position changes |
| onColorChange | (id: string | number, color: keyof typeof colorHexMap) => void | - | Callback when note color changes |
| onDelete | (id: string | number) => void | - | Callback when note is deleted |
| dragConstraintsRef | React.RefObject<Element> | - | Reference to constrain dragging within a specific element |
| className | string | "" | Additional CSS classes to apply to the note |