@tackboon/react-grid-rearrange NPM

react-grid-rearrange

Rearrange / reorder grid items via drag and drop in react.

ezgif com-gif-maker

Install

npm i @tackboon/react-grid-rearrange

yarn add @tackboon/react-grid-rearrange

Usage

import { GridContainer, BlockWrapper } from "@tackboon/react-grid-rearrange";

const App = () => {
  return (
    <GridContainer
      totalItem={15}
      itemHeight={100}
      itemWidth={100}
      colGap={10}
      rowGap={20}
    >
      {styles =>
        styles.map((style, i) => {
          return (
            <BlockWrapper index={i} animationStyle={style} key={i}>
              <p>{i}</p>
            </BlockWrapper>
          );
        })
      }
    </GridContainer>
  )
}

Component Properties

GridContainer

Prop	Type	Description	Required
totalItem	Number	Specify total block items to handle	true
itemHeight	Number	Define block item height	true
itemWidth	Number	Define block item width	true
rowGap	Number	Define row gap distance in pixel	false
colGap	Number	Define column gap distance in pixel	false
disableDrag	Boolean	Disable drag feature (default false)	false
disableInitAnimation	Boolean	Disable initial animation (default false)	false
scrollElementID	string	Specify container ID to scroll (default window)	false
cb	Function	Return callback on actions	false