v0.2.0

This version introduces a simple and efficient way to create dynamic slots and items in your framework. (Example)

Features

manualSwap (Video Tutorial) (#45, #37, #34, #27, #20)

Swapy modifies the DOM during swaps behind the scenes. When using a framework that manages the DOM (like React), this can cause conflicts when dynamically adding or removing slots or items.

To resolve this, you can allow your framework to manage the swaps by using the manualSwap option. Here's an example written in React (though it should work with other frameworks too): https://github.com/TahaSh/swapy/blob/main/examples/react-dynamic/App.tsx

destroy (#41, #52)

Swapy now includes a destroy method for cleanup. Be sure to call it when a component is unmounted, as this is important for maintaining good performance.

React example:

useEffect(() => {
  const container = document.querySelector('.container')
  swapy = createSwapy(container)

  return () => {
    swapy.destroy()
  }
}, [])

Fixes

• Allow scrolling if the item has a handle (#47)