Update wayfinder

README.md

@@ -13,10 +13,85 @@ You can also manually adjust or add a filter expression directly in the JSONPath
 
 <div align="center" style="margin-top: 30px; margin-bottom: 30px;">
 
-![WayFinder Application](./screenshot.png)
+![WayFinder Application](https://github.com/apideck-io/wayfinder/raw/main/screenshot.png)
 
 </div>
 
+## Getting started
+
+1. Install the package:
+
+```bash
+yarn add @apideck/wayfinder
+```
+
+2. Update your tailwind.config.js file and add the following path to your content array:
+
+```js
+// tailwind.config.js
+
+module.exports = {
+  content: [
+    // ...
+    './node_modules/@apideck/wayfinder/**/*.js'
+  ]
+  // ...
+}
+```
+
+3. Import the WayFinder component and use it in your application:
+
+```tsx
+import { Button, useModal } from '@apideck/components'
+import { WayFinder } from '@apideck/wayfinder'
+
+const exampleResponse = JSON.stringify(
+  {
+    id: 'file',
+    value: 'File',
+    popup: {
+      menuitem: [
+        { id: 1, name: 'New' },
+        { id: 2, name: 'Open' },
+        { id: 3, name: 'Close' }
+      ]
+    }
+  },
+  null,
+  2
+)
+
+const modalOptions = {
+  className: '!max-w-5xl !p-0',
+  onClose: () => console.log('Closing modal..')
+}
+
+const MyComponent = () => {
+  const { addModal, removeModal } = useModal()
+
+  return (
+    <Button
+      text="Open WayFinder"
+      onClick={() => {
+        addModal(
+          <WayFinder
+            onSelect={(jsonPath) => {
+              console.log(jsonPath)
+              removeModal()
+            }}
+            onClose={removeModal}
+            defaultInput={exampleResponse}
+          />,
+          modalOptions
+        )
+      }}
+    />
+  )
+}
+
+export default MyComponent
+```
+
 ## Running Locally
 
 To run the WayFinder application locally, you need to have Node.js and Yarn installed on your machine. Once you have these prerequisites, follow the steps below: