Add yarn lint, add props section to README

Author: MaxLeiter

README.md

@@ -4,9 +4,7 @@
 
 ![GIF of the demo being used](./readme/demo.gif)
 
-This is a thin wrapper around the great [SortableJS](https://github.com/SortableJS/Sortable) library. I had many issues migrating from Vue.Draggable to vue.draggable.next, and after briefly investigating I decided that it was too complicated and a smaller solution was the answer. This wrapper tries to keep you as close to Sortable as possible (wrapper libaries seem to re-implement or unnecessarily wrap a lot of code).
-
-Note that this library is small enough (see [Sortable.vue](https://github.com/MaxLeiter/sortablejs-vue3/blob/main/src/components/Sortable.vue) for what you really need) that I recommend including it in your project without using npm and importing it as a local component. All you need is the linked file.
+This is a thin wrapper around the great [SortableJS](https://github.com/SortableJS/Sortable) library. I had many issues migrating from Vue.Draggable to vue.draggable.next, and after briefly investigating I decided that it was too complicated and a smaller solution was the answer. This wrapper attempts to keep you as close to Sortable as possible.
 
 ### Why not use \<other library\>?
 
@@ -60,6 +58,13 @@ import { Sortable } from "sortablejs-vue3";
 
 5. The `tag` prop is an optional prop, it's the HTML node type of the element that creates an outer element for the included slot. the default value is `div`
 
+### Props
+
+- `list` (`Array<any>`, required): your data to list
+- `itemKey` (`string` | `(item) => (string | number | Symbol)`, required): The name of the key present in each item in the list that corresponds to a unique value (to use as the `key`)
+- `tag` (`string`, optional, default = `"div"`): The element type to render as
+- `options` (`Object`, false): the SortableJS options minus event handlers (see below)
+
 ### Events
 
 You can listen to Sortable events by adding the listeners to the `Sortable` component. For example:

package.json

@@ -20,7 +20,7 @@
     "build": "vite build && vue-tsc --emitDeclarationOnly --project tsconfig.dist.json && mv dist/lib dist/types && rm -rf favicon.ico",
     "build:site": "vue-tsc --noEmit --project tsconfig.site.json && vite --config vite.site.config.ts build",
     "preview": "vite preview",
-    "lint": "vite lint"
+    "lint": "yarn prettier --write '**/*.{ts,vue,json}'"
   },
   "types": "./dist/types/main.d.ts",
   "files": [

src/components/HelloWorld.vue

@@ -115,7 +115,7 @@ main {
           <Sortable
             v-if="element.children"
             :list="element.children"
-            item-key="id"
+            :item-key="(item) => item.id"
             :options="options"
             @change="logEvent"
             @choose="logEvent"

src/components/Sortable.vue

@@ -39,7 +39,7 @@ const props = defineProps({
     default: "",
     required: true,
   },
-  /** The element type to render as (string or function). */
+  /** The element type to render as. */
   tag: {
     type: String as PropType<string>,
     default: "div",