Swapy Without Components
Swapy Without Components is a React and Tailwind CSS component from UI Layouts, licensed MIT. Copy it and paste it into your project.
UI Layouts
MIT
other
What it is
Swapy Without Components is a React and Tailwind CSS component from UI Layouts, licensed MIT. Copy it and paste it into your project.
How to use it
Open it in the catalogue, press copy, and paste it into your project. The prompt you copy carries the code and the rules that tell your agent to reproduce it without changing anything.
Five free copies a month. No card.
Needs
npm i swapy
Licence
This component comes from UI Layouts and is redistributed under the MIT licence, which permits commercial use. The copyright notice travels with the code.
Swapy Without Components
'use client';
import { useEffect, useRef } from 'react';
import { type Swapy, createSwapy } from 'swapy';
const slots = [
{ slot: 'a', content: 'A', bg: 'bg-emerald-500', hasHandle: false },
{ slot: 'b', content: 'B', bg: 'bg-rose-500', hasHandle: true },
{ slot: 'c', content: 'C', bg: 'bg-blue-500', hasHandle: false },
{ slot: 'd', content: 'D', bg: 'bg-purple-500', hasHandle: false },
{ slot: 'e', content: 'E', bg: 'bg-pink-500', hasHandle: false },
{ slot: 'f', content: 'F', bg: 'bg-yellow-400', hasHandle: true },
{ slot: 'g', content: 'G', bg: 'bg-green-500', hasHandle: true },
{ slot: 'h', content: 'H', bg: 'bg-orange-500', hasHandle: false },
{ slot: 'i', content: 'I', bg: 'bg-cyan-500', hasHandle: false },
];
function SwapyWithoutComponents() {
const swapyRef = useRef<Swapy | null>(null);
const containerRef = useRef<HTMLDivElement>(null);
useEffect(() => {
if (containerRef.current) {
swapyRef.current = createSwapy(containerRef.current, {
// animation: 'dynamic'
// swapMode: 'drop',
// autoScrollOnDrag: true,
// enabled: true,
// dragAxis: 'x',
// dragOnHold: true
});
// swapyRef.current.enable(false)
// swapyRef.current.destroy()
// console.log(swapyRef.current.slotItemMap())
swapyRef.current.onBeforeSwap((event) => {
console.log('beforeSwap', event);
// This is for dynamically enabling and disabling swapping.
// Return true to allow swapping, and return false to prevent swapping.
return true;
});
swapyRef.current.onSwapStart((event) => {
console.log('start', event);
});
swapyRef.current.onSwap((event) => {
console.log('swap', event);
});
swapyRef.current.onSwapEnd((event) => {
console.log('end', event);
});
}
return () => {
swapyRef.current?.destroy();
};
}, []);
return (
<div
className='w-full mx-auto grid xl:grid-cols-[3fr_5fr_2fr] md:grid-cols-[3fr_5fr_2fr] grid-cols-[3fr_5fr_2fr] gap-4'
ref={containerRef}
>
{slots.map(({ slot, content, bg, hasHandle }) => (
<div
key={slot}
className={`slot w-full h-32 rounded-[10px] data-swapy-highlighted:bg-neutral-200 dark:data-swapy-highlighted:bg-neutral-800`}
data-swapy-slot={slot}
>
{content && (
<div
className={`item relative flex flex-col items-center justify-center rounded-[10px] w-full h-full ${bg}`}
data-swapy-item={slot}
>
{hasHandle && (
<div
className='cursor-grab w-6 h-6 opacity-50 absolute top-[14px] left-[10px]'
data-swapy-handle
>
<svg
xmlns='http://www.w3.org/2000/svg'
width='24'
height='24'
viewBox='0 0 24 24'
fill='none'
stroke='currentColor'
strokeWidth='2'
strokeLinecap='round'
strokeLinejoin='round'
className='lucide lucide-grip-vertical-icon lucide-grip-vertical'
>
<circle cx='9' cy='12' r='1' />
<circle cx='9' cy='5' r='1' />
<circle cx='9' cy='19' r='1' />
<circle cx='15' cy='12' r='1' />
<circle cx='15' cy='5' r='1' />
<circle cx='15' cy='19' r='1' />
</svg>
</div>
)}
<div>{content}</div>
</div>
)}
</div>
))}
</div>
);
}
export default SwapyWithoutComponents;
'use client';
import { cn } from '@/lib/utils';
import type React from 'react';
import { useEffect, useRef } from 'react';
import { type SlotItemMapArray, createSwapy } from 'swapy';
type AnimationType = 'dynamic' | 'spring' | 'none';
type SwapMode = 'hover' | 'drop';
type Config = {
animation: AnimationType;
continuousMode: boolean;
manualSwap: boolean;
swapMode: SwapMode;
autoScrollOnDrag: boolean;
};
type SwapyLayoutProps = {
id: string;
enable?: boolean;
onSwap?: (event: { newSlotItemMap: { asArray: SlotItemMapArray } }) => void;
config?: Partial<Config>;
className?: string;
children: React.ReactNode;
};
export const SwapyLayout = ({ id, onSwap, config = {}, className, children }: SwapyLayoutProps) => {
const containerRef = useRef<HTMLDivElement | null>(null);
const swapyRef = useRef<ReturnType<typeof createSwapy> | null>(null);
useEffect(() => {
const container = containerRef.current;
if (!container) return;
swapyRef.current = createSwapy(container, config);
if (onSwap) {
swapyRef.current.onSwap(onSwap);
}
return () => {
swapyRef.current?.destroy();
};
}, [config, onSwap]);
return (
<div id={id} ref={containerRef} className={className}>
{children}
</div>
);
};
export const DragHandle = ({ className }: { className?: string }) => {
return (
<div
data-swapy-handle
className={cn(
'absolute top-2 left-2 cursor-grab text-neutral-500 rounded-md bg-transparent active:cursor-grabbing ',
className
)}
>
<svg
xmlns='http://www.w3.org/2000/svg'
width='24'
height='24'
viewBox='0 0 24 24'
fill='none'
stroke='currentColor'
strokeWidth='2'
strokeLinecap='round'
strokeLinejoin='round'
className='lucide lucide-grip-vertical-icon lucide-grip-vertical opacity-80'
>
<circle cx='9' cy='12' r='1' />
<circle cx='9' cy='5' r='1' />
<circle cx='9' cy='19' r='1' />
<circle cx='15' cy='12' r='1' />
<circle cx='15' cy='5' r='1' />
<circle cx='15' cy='19' r='1' />
</svg>
</div>
);
};
export const SwapySlot = ({
id,
className,
children,
}: {
id: string;
className?: string;
children: React.ReactNode;
}) => {
return (
<div
className={cn(
'data-swapy-highlighted:bg-neutral-200 dark:data-swapy-highlighted:bg-neutral-800',
className
)}
data-swapy-slot={id}
>
{children}
</div>
);
};
const dragOpacityClassMap: Record<number, string> = {
10: 'data-swapy-dragging:opacity-10',
20: 'data-swapy-dragging:opacity-20',
30: 'data-swapy-dragging:opacity-30',
40: 'data-swapy-dragging:opacity-40',
50: 'data-swapy-dragging:opacity-50',
60: 'data-swapy-dragging:opacity-60',
70: 'data-swapy-dragging:opacity-70',
80: 'data-swapy-dragging:opacity-80',
90: 'data-swapy-dragging:opacity-90',
100: 'data-swapy-dragging:opacity-100',
};
export const SwapyItem = ({
id,
className,
children,
dragItemOpacity = 100, // default to 100
}: {
id: string;
className?: string;
children: React.ReactNode;
dragItemOpacity?: number;
}) => {
const opacityClass = dragOpacityClassMap[dragItemOpacity] ?? 'data-swapy-dragging:opacity-50';
return (
<div className={cn(opacityClass, className)} data-swapy-item={id}>
{children}
</div>
);
};