react-draggable-layout

Put your React.js components into a draggable column layout.

Pages

• npm
• github
• sandbox

Install

yarn add react-draggable-layout

npm install --save react-draggable-layout

Usage

import DraggableLayout from 'react-draggable-layout';

export default function App() {
  const components = [
    { col: 0, id: 'Component 1', component: <div style={{ height: '120px', backgroundColor: 'rgb(125 211 252)', borderRadius: '1rem', padding: '24px', boxShadow: '0 8px 10px -4px #cccccc' }}>Component #1</div> },
    { col: 0, id: 'Component 2', component: <div style={{ height: '180px', backgroundColor: 'rgb(153 246 228)', borderRadius: '1rem', padding: '24px', boxShadow: '0 8px 10px -4px #cccccc' }}>Component #2</div> },
    { col: 1, id: 'Component 3', component: <div style={{ height: '300px', backgroundColor: 'rgb(254 202 202)', borderRadius: '1rem', padding: '24px', boxShadow: '0 8px 10px -4px #cccccc' }}>Component #3</div> },
    { col: 1, id: 'Component 4', component: <div style={{ height: '250px', backgroundColor: 'rgb(191 219 254)', borderRadius: '1rem', padding: '24px', boxShadow: '0 8px 10px -4px #cccccc' }}>Component #4</div> },
    { col: 2, id: 'Component 5', component: <div style={{ height: '180px', backgroundColor: 'rgb(254 215 170)', borderRadius: '1rem', padding: '24px', boxShadow: '0 8px 10px -4px #cccccc' }}>Component #5</div> },
  ];

  const handleOnChange = (c) => {
    console.log('onChange()', c);
  };

  return (
    <div style={{ height: '100vh', backgroundColor: '#f4f4f4' }}>
      <DraggableLayout components={components} columns={3} mainColumnIndex={1} onChange={handleOnChange} draggable={true} />
    </div>
  );
}

Properties

• components
  • An array of components that you want to place into DraggableLayout. Each object must contain following props:
    • id - a unique id
    • col - an index of column where you want to place your component
    • component - a component you want to place
• onChange
  • An event that is fired when a user draggs the component to another place.
• columns
  • Number of columns in the layout.
• mainColumnIndex
  • Index of the main column. The main column is wider than others.
• draggable
  • Set false if you want to disable drag and drop.