1.0.17 • Published 11 months ago

shmood-dnd-board v1.0.17

Weekly downloads
-
License
MIT
Repository
-
Last release
11 months ago

shmood-board: a drag & drop library

Shmood DND Board is a simple gallery view for drag and droppable, sortable, and movable grid items. Allows you to edit text and displays images.

Want to use in your application?

Yarn

 yarn add shmood-dnd-board

NPM

 npm install shmood-dnd-board

Code

Imports:

import {Board, Item} from "shmood-dnd-board";
import "shmood-dnd-board/shmood-board.css";

Init Sample Data

import "./App.css";

import {Board, Item} from "shmood-dnd-board";
import "shmood-dnd-board/shmood-board.css";

import {Footer} from "./Footer";

// import "./board.css";

const poem1 =
  "The sky here is American like the blue of your eyes \nthe folds of your eyelids the Hindu Kush mountain. \nThe rich vein of the Hindu Kush only a stony ridge \ncutting across the parched soil of Afghanistan \non which the primal play of love.";

const poem2 =
  "Back to Previous The More Loving One BY W. H. AUDEN Looking up at the stars, I know quite well That, for all they care, I can go to hell, But on earth indifference is the least We have to dread from man or beast. How should we like it were stars to burn With a passion for us we could not return? If equally affection cannot be, Let the more loving one be me. Admirer as I think I am Of stars that do not give a damn, I cannot, now I see them, say I missed one terribly all day.";

const icon =
  "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSk3foOLIFyywPZxD0tOaPCXnsND2mzflXeGQ&usqp=CAU";

const icon2 =
  "https://i.pinimg.com/originals/2c/55/df/2c55dfbb99703261cdf22a315b5f32fe.jpg";

const icon3 =
  "https://img.wattpad.com/24b337b078c3e5e86f2d740a32ac0660c2c4dab7/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f776174747061642d6d656469612d736572766963652f53746f7279496d6167652f4a7746346a694b47336d746462773d3d2d3638333532373230322e313537623231356131653161623938633239313532373333343133362e6a7067?s=fit&w=720&h=720";
function App() {
  const LOADED_DATA: Item[] = [
    {
      id: "1asdfsdaf",
      position: 1,
      type: "image",
      title: "Sand",
      icon: icon,
      content: "https://picsum.photos/id/421/450/950",
    },
    {
      id: "2zzz",
      position: 2,
      type: "image",
      title: "Trolly",
      icon: icon2,
      content: "https://picsum.photos/id/419/950/350",
    },
    {
      id: 3,
      position: 3,
      type: "text",
      title: "Hindu Kush",
      icon: icon3,
      content: poem1,
    },
    {
      id: "4s8923rpqw",
      position: 4,
      type: "image",
      title: "Cabin in the Woods.",
      icon: icon,
      content: "https://picsum.photos/id/424/950/450",
    },
    {
      id: 5,
      position: 5,
      type: "image",
      title: "Coffee Beans",
      icon: icon2,
      content: "https://picsum.photos/id/425/950/450",
    },
    {
      id: "6ekkew",
      position: 6,
      type: "text",
      title: "Poem on Love",
      icon: icon3,
      content: poem2,
    },
    {
      id: "7ok",
      position: 7,
      type: "image",
      title: "Wheat",
      icon: icon,
      content: "https://picsum.photos/id/427/150/1050",
    },
    {
      id: "lesserafim",
      position: 8,
      type: "image",
      title: "Cities and Bikes",
      icon: icon,
      content: "https://picsum.photos/id/212/1450/1450",
    },
    {
      id: "ive",
      position: 9,
      type: "image",
      title: "Water",
      icon: icon2,
      content: "https://picsum.photos/id/909/100/100",
    },
    {
      id: "twice",
      position: 10,
      type: "image",
      title: "Pinecone (greyscale)",
      icon: icon3,
      content: "https://picsum.photos/id/80/300/300",
    },
  ];

  function onReorder(newItems: Item[]) {
    console.log("Items Re-ordered: ", newItems);
  }
  function onDelete(id: string | number) {
    console.log("Item Deleted ", id);
  }
  function onEdit(modifiedItem: Item) {
    console.log("Item Edited ", modifiedItem);
  }

  const className = "wz-className";

  return (
    <>
      Testing DND NPM LIBRARY aasaaa
      <div>
        <Board
          items={LOADED_DATA}
          styles={{
            gridGap: 50,
          }}
          minimal={false}
          itemWidth={400}
          onReorder={onReorder}
          onDelete={onDelete}
          onEdit={onEdit}
          className={className}
          footerContent={Footer}
        />
      </div>
    </>
  );
}

export default App;

Contributing:

Run with

yarn dev

Feb 6 Screenshots

Layout

Draggable on Hover

Variable Footer Heights

Options Dropdown

Editing a Photo

Editing a Text Item

Jan 24 Update - Images & Text

Editing + Moving

https://github.com/wizhaaa/shmood-board/assets/46132945/1098072f-f0ac-48f0-aa52-c63b717dc835

Deleting

https://github.com/wizhaaa/shmood-board/assets/46132945/bb3c946d-bf22-4f0d-bfe4-4b208f9049db

Jan 23 Update

https://github.com/wizhaaa/shmood-board/assets/46132945/5754286a-6698-4727-89b3-2ce3e81e45b7

1.0.17

11 months ago

1.0.16

11 months ago

1.0.15

11 months ago

1.0.14

11 months ago

1.0.13

11 months ago

1.0.12

11 months ago

1.0.11

11 months ago

1.0.10

11 months ago

1.0.9

11 months ago

1.0.8

11 months ago

1.0.7

11 months ago

1.0.6

11 months ago

1.0.5

11 months ago

1.0.4

11 months ago

1.0.3

11 months ago

1.0.2

11 months ago

1.0.1

11 months ago

1.0.0

11 months ago

0.0.6

11 months ago

0.0.5

11 months ago

0.0.4

11 months ago

0.0.3

11 months ago

0.0.2

11 months ago

0.0.1

11 months ago

0.0.0

11 months ago