A react wrapper for the Swapy library by TahaSh
npm install react-swapy -SThe library exports 4 components - Container, Slot, Item and Handle. It can be used like below:
import ReactSwapy from 'react-swapy'
const Component = () => {
<ReactSwapy.Container className='container'>
<ReactSwapy.Slot id={0} className='slot'>
<ReactSwapy.Item className='item' name={'a'}>
<ItemA />
</ReactSwapy.Item>
</ReactSwapy.Slot>
<ReactSwapy.Slot id={1} className='slot'>
</ReactSwapy.Slot>
<ReactSwapy.Slot id={2} className='slot'>
<ReactSwapy.Item>
<ReactSwapy.Handle className='handle'>|||</ReactSwapy.Handle>
<ItemC />
</ReactSwapy.Item>
</ReactSwapy.Slot>
<ReactSwapy.Slot id={3} className='slot'>
<ReactSwapy.Item className='item' name={'d'}>
<ItemD />
</ReactSwapy.Item>
</ReactSwapy.Slot>
</ReactSwapy.Container>
}Make sure to add styles for your slots and items through
classNameprop for each component, as some properties of the inlinestyleprops is getting overridden.
| Prop | Description |
|---|---|
enable? |
default: true. false for locking swaped items |
config? |
default: {}. js { animation: 'dynamic' | 'spring' | 'none' }
|
onSwap? |
callback for all swapping events |
| Prop | Description |
|---|---|
id? |
unique ID for each slot. If id is not provided a name prop is must |
name? |
unique name for each slot |
| Prop | Description |
|---|---|
name |
unique name to identify an item in the slots |
This library is not extensively tested. If you find issues, please raise it here in Github Issues