From c5c60b88949a2f442e624a22ee0f5b2d57c1081f Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sat, 10 Dec 2022 10:54:49 +0100
Subject: [PATCH] chore(node-resizer): add README

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 packages/node-resizer/README.md | 56 +++++++++++++++++++++++++++++++--
 packages/node-toolbar/README.md |  3 +-
 2 files changed, 55 insertions(+), 4 deletions(-)

diff --git a/packages/node-resizer/README.md b/packages/node-resizer/README.md
index 16d38b2f..0203ed71 100644
--- a/packages/node-resizer/README.md
+++ b/packages/node-resizer/README.md
@@ -1,3 +1,55 @@
-# Vue Flow: Toolbar Component
+# Vue Flow: Node Resizer Component
 
-This is a toolbar component for Vue Flow.
+This is a resizer component for Vue Flow.
+It can be used to create resize your nodes.
+
+## 🛠 Setup
+
+```bash
+# install
+$ yarn add @vue-flow/node-resizer
+
+# or
+$ npm i --save @vue-flow/node-resizer
+```
+
+## 🎮 Quickstart
+
+```vue
+
+<script setup>
+import { VueFlow } from '@vue-flow/core'
+import initialElements from './initial-elements'
+
+// some nodes and edges
+const elements = ref(initialElements)
+</script>
+
+<template>
+  <VueFlow v-model="elements" fit-view-on-init>
+    <template #node-custom="nodeProps">
+      <CustomNode :data="nodeProps.data" :label="nodeProps.label" />
+    </template>
+  </VueFlow>
+</template>
+```
+
+```vue
+<script lang="ts" setup>
+import { Handle, Position } from '@vue-flow/core'
+import { NodeResizer } from '@vue-flow/node-resizer'
+
+// make sure to include the necessary styles!
+import '@vue-flow/node-resizer/dist/style.css'
+
+defineProps(['label'])
+</script>
+
+<template>
+  <NodeResizer min-width="100" min-height="30" />
+
+  <Handle type="target" :position="Position.Left" />
+  <div style="padding: 10px">{{ label }}</div>
+  <Handle type="source" :position="Position.Right" />
+</template>
+```
diff --git a/packages/node-toolbar/README.md b/packages/node-toolbar/README.md
index a0d3319a..57b32ca8 100644
--- a/packages/node-toolbar/README.md
+++ b/packages/node-toolbar/README.md
@@ -21,7 +21,6 @@ $ npm i --save @vue-flow/node-toolbar
 
 <script setup>
 import { VueFlow } from '@vue-flow/core'
-import { NodeToolbar } from '@vue-flow/node-toolbar'
 import initialElements from './initial-elements'
 
 // some nodes and edges
@@ -29,7 +28,7 @@ const elements = ref(initialElements)
 </script>
 
 <template>
-  <VueFlow v-model="elements" fit-view-on-init class="vue-flow-basic-example">
+  <VueFlow v-model="elements" fit-view-on-init>
     <template #node-custom="nodeProps">
       <CustomNode :data="nodeProps.data" :label="nodeProps.label" />
     </template>