@4geit/rct-reorderable-grid-list-component

reorderable grid list using react-dnd

Usage no npm install needed!

<script type="module">
  import 4geitRctReorderableGridListComponent from 'https://cdn.skypack.dev/@4geit/rct-reorderable-grid-list-component';
</script>

README

@4geit/rct-reorderable-grid-list-component npm version


reorderable grid list using react-dnd

Demo

A live storybook is available to see how the component looks like @ http://react-packages.ws3.4ge.it

Installation

  1. A recommended way to install @4geit/rct-reorderable-grid-list-component is through npm package manager using the following command:
npm i @4geit/rct-reorderable-grid-list-component --save

Or use yarn using the following command:

yarn add @4geit/rct-reorderable-grid-list-component
  1. Depending on where you want to use the component you will need to import the class RctReorderableGridListComponent to your project JS file as follows:
import RctReorderableGridListComponent from '@4geit/rct-reorderable-grid-list-component'

For instance if you want to use this component in your App.js component, you can use the RctReorderableGridListComponent component in the JSX code as follows:

import React from 'react'
// ...
import RctReorderableGridListComponent from '@4geit/rct-reorderable-grid-list-component'
// ...
const WrapReorderableItemComponent = props => (
  <div>{ props.itemId }</div>
)
// ...
const App = () => (
  <div className="App">
    <RctReorderableGridListComponent
      cols={ 3 }
      handleSetPosition={ () => {} }
      fetchData={ () => {} }
      data={ [] }
      itemComponent={ <WrapReorderableItemComponent/> }
    />
  </div>
)