React View Transitions Library

npm install magicmove

import { MagicMoveProvider, MagicMove, useMagicMove } from 'magicmove';

function App() {
  const { trigger } = useMagicMove();
  const [expanded, setExpanded] = useState(false);

  return (
    <MagicMoveProvider>
      <MagicMove id="card" className={expanded ? 'large' : 'small'}>
        <button onClick={() => trigger(() => setExpanded(!expanded))}>
          Toggle
        </button>
      </MagicMove>
    </MagicMoveProvider>
  );
}