react-swapy v1.0.2

react-swapy

A react wrapper for the Swapy library by TahaSh

Demo

Storybook

Installation

npm install react-swapy -S

Usage

The 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 className prop for each component, as some properties of the inline style props is getting overridden.

Props

ReactSwapy.Container

ReactSwapy.Slot

ReactSwapy.Item

Disclaimer

This library is not extensively tested. If you find issues, please raise it here in Github Issues