likftc

List item keys for transition components.

What is FLIP?

First, Last, Invert, Play

Why likftc

Frontend components use keys to relate the DOM. When a item is removed and append a new one with the same key before the transition of the older one end, it will reuse the same instance and the entering transition might conflict with the older exiting one. likftc give a new key for the new item that make it use another instance to avoid the problem simply.

      Setup

      npm install @likftc/core

      Usage

      Please check Svelte, Vue, React usage.

      For advanced usage, you can customize the behavior you.

      const { get, sync } = Likftc(keys, generator);

// update your keys while your list changed
sync(keys);

// to get your key
const altKey = get(key);

      Types:

      type keys = (string | number)[];
type generator = (() => string | number) | undefined;

      You can also check how it integrated with Svelte, Vue, React.

      Additional Credits

      Icons from Phosphor.

      License

      MIT