Merge pull request #168 from zhengkyl/master

update solid examples to fix #121
formkit · Nov 3, 2023 · 6989fd6 · 6989fd6 · vercel · Nov 3, 2023
2 parents 8318a37 + 02e182c
commit 6989fd6
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 15 deletions.
diff --git a/docs/src/examples/dropdown/dropdown-solid.tsx b/docs/src/examples/dropdown/dropdown-solid.tsx
@@ -3,19 +3,17 @@ import { createSignal, Show } from "solid-js"
 
 const Dropdown = () => {
   const [show, setShow] = createSignal(false)
-  const reveal = () => setShow(!show)
+  const reveal = () => setShow(!show())
 
-  let parent: HTMLDivElement
-
-  createAutoAnimate(() => parent /* optional config */)
+  const [parent, setEnabled] = createAutoAnimate(/* optional config */)
 
   return (
     <div ref={parent}>
-      <strong className="dropdown-label" onClick={reveal}>
+      <strong class="dropdown-label" onClick={reveal}>
         Click me to open!
       </strong>
       <Show when={show()} keyed>
-        <p className="dropdown-content">Lorum ipsum...</p>
+        <p class="dropdown-content">Lorum ipsum...</p>
       </Show>
     </div>
   )

diff --git a/docs/src/examples/intro/intro-solid.jsx b/docs/src/examples/intro/intro-solid.jsx
@@ -1,10 +1,7 @@
 import { createAutoAnimate } from '@formkit/auto-animate/solid'
 
 function MyList () {
-  let animationParent;
-
-  createAutoAnimate(() => animationParent, /* optional config */)
-
+  const [animationParent] = createAutoAnimate()
   return (
     <ul ref={animationParent}>
       {/* 🪄 Magic animations for your list */}

diff --git a/docs/src/examples/solid/index.ts b/docs/src/examples/solid/index.ts
@@ -2,11 +2,10 @@ const solidPrimitive = {
   solid: {
     language: "tsx",
     ext: "tsx",
-    example: `import { createSignal, For, Show } from "solid-js"
-import { createAutoAnimate } from "@formkit/auto-animate/solid"
+    example: `import { createSignal, For, Show } from 'solid-js'
+import { createAutoAnimate } from '@formkit/auto-animate/solid'
 
 const App = function () {
-  let parent: HTMLDivElement
   const [parent, setEnabled] = createAutoAnimate(/* optional config */)
 
   const menuItems = ["Home", "Settings", "Logout"]
@@ -41,7 +40,7 @@ const solidDirective = {
   solid: {
     language: "tsx",
     ext: "tsx",
-    example: `import { createSignal } from 'solid-js'
+    example: `import { createSignal, For, Show } from 'solid-js'
 import { createAutoAnimateDirective } from '@formkit/auto-animate/solid'
 
 const App = function () {
@@ -67,7 +66,6 @@ const App = function () {
       </button>
     </div>
   </div>
-</>
 }
 
 export default App`,