# @lyonbot/interactive-blocks

![GitHub Workflow Status](https://img.shields.io/github/workflow/status/lyonbot/interactive-blocks/main) ![npm](https://img.shields.io/npm/v/@lyonbot/interactive-blocks) ![npm bundle size (version)](https://img.shields.io/bundlephobia/min/@lyonbot/interactive-blocks/latest) ![npm bundle size (version)](https://img.shields.io/bundlephobia/minzip/@lyonbot/interactive-blocks/latest?label=min%2Bgzip) ![npm type definitions](https://img.shields.io/npm/types/@lyonbot/interactive-blocks)

Make interactive selectable, drag-and-drop, copy-and-paste ready, Block and Slot components easily! Works with Vue, React and any MV* framework.

[ [▶️ Try the Demo](https://lyonbot.github.io/interactive-blocks/) ] [ [📁 View on GitHub](https://github.com/lyonbot/interactive-blocks) ] [ [📖 Document](https://lyonbot.github.io/interactive-blocks/docs/) ]

## How Interactive?

- (multiple) selectable!
- copy and paste! with system clipboard
- keyboard shortcuts!
- drag and drop! (optional)

These keyboard shortcuts are supported!

- `Ctrl+X`, `Ctrl+C`, `Ctrl+V`
- Navigate with arrow keys
- Select multiple blocks with `Shift` + arrow keys
- Select all blocks with `Ctrl+A`
- `Delete`, `Backspace`

## How to Integrate

- React: [@lyonbot/interactive-blocks-react](https://github.com/lyonbot/interactive-blocks/tree/main/packages/interactive-blocks-react)
- Vue 2: [@lyonbot/interactive-blocks-vue2](https://github.com/lyonbot/interactive-blocks/tree/main/packages/interactive-blocks-vue2)

This lib works with any framework, including React and Vue. Example is written with React.

[📖 Read document with Docsify](https://lyonbot.github.io/interactive-blocks/docs/)

1. [Basic Setup](./docs/basic-setup.md)

2. [Drag and Drop](./docs/drag-and-drop.md) -- read "basic setup" first