Dashboard-i-irms NPM

dashboard-i-irms

Tech

DragInnoways uses a number of open source projects to work properly:

ReactJS - Powerful Javscript Library!
rbd - react-beautiful-dnd
packery - plugin that makes gapless and draggable layouts.

And of course DragInnoways itself is open source with a public repository on GitHub.

Installation

DragInnoways requires Node.js v10+ to run.

Install the dependencies and devDependencies and start the server.

npm i dashboard-i-irms

Note

Please remove strict mode in order to work

root.render(
  <!-- <React.StrictMode> -->
    <App />
  <!-- </React.StrictMode> -->
);

Usage with demo data

import { Demo } from "dashboard-i-irms"
function App() {
  return (
    <div className="App" style={{
      maxWidth: '1200px',
      margin: '0 auto'
    }}>
      <Demo />
    </div>
  );
}

export default App;

Usage Custom Data

import { useState, useEffect } from "react";
import Card from './Card'
import DragInnoways from "dashboard-i-irms"
function App() {
  const classes = ['col-8 mb-4', 'col-4 mb-4']
  const [items, setItems] = useState([]);

  function getRandomNumber(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  const onDragEnd = (result) => {
    if (!result.destination) return;
    const reorderedItems = Array.from(items);
    const [movedItem] = reorderedItems.splice(result.source.index, 1);
    reorderedItems.splice(result.destination.index, 0, movedItem);
    setItems(reorderedItems);
  }

  useEffect(() => {
    const newItems = []
    for(let i = 0;i<20;i++) {
      newItems.push({ id: `item-${i}`, itemClass: classes[getRandomNumber(0, 1)], content: <div style={{ height: `${getRandomNumber(200, 450)}px` }}><Card i={i} /></div> },)
    } 
    setItems(newItems)
  }, [])

  return (
    <div className="App" style={{
      maxWidth: '1200px',
      margin: '0 auto'
    }}>
      <DragInnoways items={items} onDragEnd={onDragEnd}></DragInnoways>
    </div>
  );
}

export default App;