solid-auto-animate

SolidJS bindings for FormKit's AutoAnimate

Install

npm install --save solid-js @formkit/auto-animate solid-auto-animate

yarn add solid-js @formkit/auto-animate solid-auto-animate

pnpm add solid-js @formkit/auto-animate solid-auto-animate

Usage

As directive

import { createSignal } from 'solid-js';
import { autoAnimate } from 'solid-auto-animate';

function App() {
  // Required to prevent TS from removing the directive
  autoAnimate;

  const [items, setItems] = createSignal([0, 1, 2]);
  const add = () => setItems((current) => [...current, current.length]);

  return (
    <>
      <ul use:autoAnimate={/* optional config */}>
        <For each={items()}>
          {(item) => <li>{item}</li>}
        </For>
      </ul>
      <button onClick={add}>Add number</button>
    </>
  );
}

As primitive

import { createSignal } from 'solid-js';
import { useAutoAnimate } from 'solid-auto-animate';

function App() {
  const [items, setItems] = createSignal([0, 1, 2]);
  const add = () => setItems((current) => [...current, current.length])

  let parent;

  useAutoAnimate(() => parent, /* optional config */)

  return (
    <>
      <ul ref={parent}>
        <For each={items()}>
          {(item) => <li>{item}</li>}
        </For>
      </ul>
      <button onClick={add}>Add number</button>
    </>
  );
}

License

MIT © lxsmnsyc