# 🧩 formcrafter-core

A tiny, composable drag-and-drop core built with React Hooks and Context — great for form builders, canvas editors, visual layout tools, and custom UIs.

---

## 🚀 Features

- 🎣 `useDraggable` and `useDroppable` hooks
- 🧠 Shared state via React Context (`DndProvider`)
- 📍 Canvas-style positioning — drop items exactly where released
- 🧼 Zero dependencies, TypeScript-first
- 🔄 `isDragging` flag for visual feedback

---

## 📦 Installation

```bash
npm install formcrafter-core
```

or

yarn add formcrafter-core

🛠 Usage

1. Wrap Your App with DndProvider

import { DndProvider } from 'formcrafter-core';

function App() {
  return (
    <DndProvider>
      <DraggableItem />
      <Canvas />
    </DndProvider>
  );
}

2. Create a Draggable Component

import { useDraggable } from 'formcrafter-core';

const MyBox = () => <div style={{ padding: 10, background: 'lightblue' }}>Drag me</div>;

const DraggableItem = () => {
  const item = {
    component: <MyBox />,
    x: 0,
    y: 0,
  };

  const { draggableProps } = useDraggable(item);

  return <div {...draggableProps}>{item.component}</div>;
};

3. Create a Droppable Canvas

import { useDroppable } from 'formcrafter-core';
import { useState } from 'react';

const Canvas = () => {
  const [items, setItems] = useState([]);

  const { droppableProps } = useDroppable((item, position) => {
    setItems((prev) => [...prev, { ...item, ...position }]);
  });

  return (
    <div
      {...droppableProps}
      style={{ width: '100%', height: '400px', border: '1px solid #ccc', position: 'relative' }}
    >
      {items.map((item, index) => (
        <div
          key={index}
          style={{
            position: 'absolute',
            left: item.x,
            top: item.y,
          }}
        >
          {item.component}
        </div>
      ))}
    </div>
  );
};

🔧 API

DndProvider

Wrap your component tree to enable drag-and-drop context.

useDraggable(item: any)

Makes an element draggable.

Returns:

{
  draggableProps: {
    draggable: true;
    onDragStart: () => void;
    onDragEnd: () => void;
    isDragging: boolean;
  }
}

You can use isDragging to apply styles:

const { draggableProps } = useDraggable(item);
return (
  <div style={{ opacity: draggableProps.isDragging ? 0.5 : 1 }} {...draggableProps}>
    ...
  </div>
);

useDroppable(onDropItem: (item, position) => void)

Makes an area accept drops and gives you the position relative to the drop zone.

Returns:

{
  droppableProps: {
    onDragOver: (event: React.DragEvent) => void;
    onDrop: (event: React.DragEvent) => void;
  }
}

Types

type ItemType = {
  x: number;
  y: number;
  component: React.ReactNode;
};

type PositionType = {
  x: number;
  y: number;
};

🎨 Example UI Use Cases

• Form builders
• Canvas layout editors
• Drag-to-place component builders
• Landing page design tools

🧪 Development Notes

• Built with React Hooks and Context
• Supports canvas-style drop positioning
• Lightweight and reusable

📄 License

MIT

✨ Author

Made with ❤️ by [Your Name]

💡 Want More?

• Add snap-to-grid
• Use localStorage or Redux to persist canvas state
• Integrate keyboard navigation and accessibility
• Publish a form builder powered by this core

---