React | Likftc

Setup

npm install @likftc/core @likftc/react

Usage

const { get } = useLikftc(keys);

// custom generator
import { v4 } from "uuid";
const generator = () => v4();
const { get } = useLikftc(keys, generator);

Types:

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

and replace the key with get(key):

  <Flipper flipKey={keys.join(",")}>
    <ul>
      {keys.map((key) => (
        <Flipped
-         key={key}
+         key={get(key)}
-         flipId={key}
+         flipId={get(key)}
          onAppear={onAppear}
          onExit={onExit}
        >
          <li>{key}</li>
        </Flipped>
      ))}
    </ul>
  </Flipper>

Demo

We use React FLIP Toolkit and Animate.css for demo.

With likftc

import useLikftc from "@likftc/react";
import React, { ReactNode } from "react";
import { Flipped, Flipper } from "react-flip-toolkit";
import { v4 } from "uuid";
import { onAppear, onExit } from "./transition";
import useFrame from "./useFrame";

export default function With(): ReactNode {
  const frame = useFrame();
  const { get } = useLikftc(frame, v4);
  return (
    <Flipper flipKey={frame.join(",")}>
      <ul>
        {frame.map((item) => {
          const mapKey = get(item);
          return (
            <Flipped
              key={mapKey}
              flipId={mapKey}
              onAppear={onAppear}
              onExit={onExit}
            >
              <li>{item}</li>
            </Flipped>
          );
        })}
      </ul>
    </Flipper>
  );
}

Without likftc

import type { ReactNode } from "react";
import React from "react";
import { Flipped, Flipper } from "react-flip-toolkit";
import { onAppear, onExit } from "./transition";
import useFrame from "./useFrame";

export default function With(): ReactNode {
  const frame = useFrame();

  return (
    <Flipper flipKey={frame.join(",")}>
      <ul>
        {frame.map((item) => (
          <Flipped key={item} flipId={item} onAppear={onAppear} onExit={onExit}>
            <li>{item}</li>
          </Flipped>
        ))}
      </ul>
    </Flipper>
  );
}

Check the full demo code here.