react-sticky-canvas

Draggable, minimal sticky notes for React. Highly customizable, mobile-friendly, and lightweight.

Features

• 🖱️ Draggable: Drag and drop anywhere on the canvas.
• 📱 Mobile Friendly: Supports touch events and custom mobile positioning.
• 🔒 Lockable: Lock notes in place.
• 🛠️ Debug Mode: Easily see coordinates and rotation.
• 💾 Auto-save: Positions are automatically persisted to localStorage.
• 🎨 Customizable: Supply your own content or use the simple text default.

Installation

npm install react-sticky-canvas motion

Note: motion (Framer Motion) is a required dependency.

Usage

Simple Example

import { StickyCanvas } from 'react-sticky-canvas';

const notes = [
  {
    id: 'note-1',
    text: 'golecodes',
    color: 'yellow',
    initialX: 100,
    initialY: 100,
    initialRotation: 5,
  },
  {
    id: 'note-2',
    text: 'Drag me!',
    color: 'green',
    initialX: 300,
    initialY: 150,
  }
];

function App() {
  return (
    <div className="relative min-h-screen">
      <StickyCanvas notes={notes} />
    </div>
  );
}

Advanced Usage with Custom Content

import { StickyCanvas, StickyNote } from 'react-sticky-canvas';

function CustomApp() {
  return (
    <StickyCanvas debug>
      <StickyNote
        id="custom-1"
        color="pink"
        initialX={200}
        initialY={200}
        width={200}
        height={200}
      >
        <div className="custom-content">
          <h3>Custom Note</h3>
          <p>You can put any JSX here!</p>
        </div>
      </StickyNote>
    </StickyCanvas>
  );
}

Props

StickyCanvas

| Prop | Type | Default | Description | | --- | --- | --- | --- | | notes | StickyNoteConfig[] | [] | Array of note configurations. | | zIndex | number | 9998 | Z-index of the canvas container. | | debug | boolean | false | Enable debug mode for all notes. | | className | string | '' | Custom class for the container. |

StickyNote

| Prop | Type | Default | Description | | --- | --- | --- | --- | | id | string | Required | Unique identifier for the note (used for localStorage). | | text | string | undefined | Simple text content. | | content | ReactNode | undefined | Custom JSX content (overrides text). | | color | StickyNoteColor | 'yellow' | Note background color. Available: yellow, green, pink, blue, purple, orange. You can also pass any custom CSS color (hex, rgb, etc). | | initialX | number | Required | Starting X position. | | initialY | number | Required | Starting Y position. | | initialRotation | number | 0 | Starting rotation in degrees. | | width | number | 120 | Note width. | | height | number | 120 | Note height. | | locked | boolean | false | If true, the note cannot be dragged. | | showDebug | boolean | false | Show debug info for this specific note. |

Credits

Created with ❤️ by Manish Tamang (golecodes)

License

MIT