In this blog tutorial, we will set up and build simple mood board applications from scratch using react.js, react-dropzone, and react-dnd libraries.

We will be creating the UI and its functionalities from the ground up. However, before we begin, the final version of the app should resemble this.

Moodboard

You can also view the application's final live version.

moodboard-dnd.netlify.app

So, without any further ado let’s get this party started.

Setting up react application bootstrapped using CRA

Let us begin with our mood board react application. So, if Node.js isn't already installed on your system, the first thing you should do is install it. So, go to the official Node.js website and install the correct and appropriate version. We need node js so that we can use the node package manager, also known as NPM.

making directory

Create a new folder and open it in your preferred code editor. I'll be using VScode for this tutorial. Next, open the integrated terminal and typing

npx create-react-app react-moodboard . This command will create the app in the current directory, which will be named as react-moodboard.

react installation

Installing react application

It usually takes only a few minutes to install. Normally, we would use npm to download packages into the project, but in this case, we are using npx, the package runner, which will download and configure everything for us so that we can start with an amazing template. It's now time to start our development server, so simply type npm start, and the browser will automatically open react-app on the port 3000.

react application

So, the boilerplate template looks like this right away. Now it's time to look into the file and folder structure that create-react-app provides. All of our node dependencies are stored in a subdirectory called node module. Then there's the public folder, where the index.html file is the only thing that matters. So far, it appears that this is a regular HTML file, replete with head, body, and meta tags. Inside our body tag, you'll find a div with the id root, followed by the fallback noscript tag, which will only be visible if the user's browser doesn't support javascript.

\




   
      
      
      
      
      
      
      
      React practice

So you're presumably curious about the source of the content. Remember that all of our source code is housed in the src folder, and react will inject it into the root div element. Look in the src folder for some stylesheets, javascript scripts, and SVG files.

src directory

Now, head over to our App.js file

\

// App.js
import logo from "./logo.svg";
import "./App.css";

function App() {
  return (
    
      
        
        
          Edit src/App.js and save to reload.
        
        
          Learn React
        
      
    
  );
}
export default App;

In this situation, we're simply using regular javascript to import react from react and logo from our logo. Following that, we have a regular javascript function called APP, which is known as a functional component in react, and this function returns a react-element that looks like HTML but is actually a jsx, as you can see there is a div tag with a className of APP, which we can't say class by itself because class is a reserved word in javascript, so we have to use className in jsx. Following that, we have the header and then the image, and notice on the image source that we have our logo, which is actually a javascript variable that we imported at the top, so we must surround it with curly brackets in order to use the javascript within JSX, and then we have a paragraph, an anchor tag, and that's it for this component.

NOTE: With the help of export, we are able to extract the full component and place it on the web[age, as well as import it anywhere and utilize it. The term "export" may be found at the bottom of the app.js file, indicating that the App function is being exported.

So, Now let's look at the index.js file.

\

// index.js
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

ReactDOM.render(
  
    
  ,
  document.getElementById("root")
);
reportWebVitals();

So, we're importing react from react again, and this time we're also importing react-dom, and then we're importing the CSS stylesheet file, and finally, we're importing App from App.js, which is the file we just discussed, and there's also service worker, which is used to make your app work completely offline. After that, we use ReactDom.render, which takes two parameters.The first parameter is the jsx object, and within jsx we can include our user-defined components, so react strict mode is a react defined component, whereas App is a user-defined component; the second parameter is document.getElementById('root'), which targets the root div in our index.html file and is how we access the content in our webpage.

Note: Our content is rendered into our index.html file's root div using ReactDom.

\

Crafting a mood board application from scratch.

Let's build a simple modboard app from the ground up in react, but before, let's make a prototype or mindmap of our eventual product. Hence, our finished app will something resemble like this.

Prototype

We must first tidy up our projects by eliminating some of the files provided by create-react-app boilerplate before we can begin creating them. After you've cleaned up your files and folder, they should look like this.

Files and Folder structure

Adding and Installing some packages

We will need to install a few third-party packages for this project. so copy and paste the following command into your terminal

\

npm i react-dnd react-dnd-html5-backend react-dnd-touch-backend react-dropzone immutability-helper uuid

Dependencies

After installing all these packages your packge.json file of react-moodboard should look like this:

package.json

Let's make a separate folder called components inside our source directory, and inside it, make two folders called Moodboard and MoodboardImage. Your folder structure should now look something like this.

structure

Now go to our Moodboard component and import the useDropzone hook from the react-dropzone package, then create a function named getClassName that is called when an element in the HTML is changed, and finally destructors getRootProps, getInputProps, and isDragActive from useDropzone and copy the return statement as shown below. So finally your Moodboard component should look something like this.

import React from "react";
import { useDropzone } from "react-dropzone";

const getClassName = (className, isActive) => {
  if (!isActive) return className;
  return `${className} ${className}-active`;
};

const Moodboard = ({ onDrop, accept }) => {
  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    onDrop,
    accept,
  });

  return (
    
      
      
        {isDragActive ? (
          Drop the image here
        ) : (
          
            + Drag and drop the images / click to upload manually.
          
        )}
      
    
  );
};

export default Moodboard;

It's about time we updated our MoodboardImage component.

Now, before we get started, let's import a few things. First, let's import the useRef hook from react, followed by the useDrag and useDrop hooks from the react-dnd library.

\

import React, { useRef } from "react";
import { useDrag, useDrop } from "react-dnd";

Then you must define what type of element you want to make draggable.

\

const type = "Image";

Create an image component inside the MoodboardImage component, and the first thing you should do inside that Image component is create a reference using the useRef hooks.

useRef()

what is useRef() hook ?

This hook simply returns a mutable ref object with the passed argument as its.current property (initialValue). The returned object will be retained for the duration of the component's lifetime.

\

const refContainer = useRef(initialValue);

Let us jump right back into the code and implement useRef functionality

\

const ref = useRef(null);

Use the useDrop and useDrag hook to make the image draggable and droppable

\

const [, drop] = useDrop({
  accept: type,
  hover(item) {
    if (!ref.current) {
      return;
    }
    const dragIndex = item.index;
    const hoverIndex = index;
    if (dragIndex === hoverIndex) {
      return;
    }
    moveImage(dragIndex, hoverIndex);
    item.index = hoverIndex;
  },
});

const [{ isDragging }, drag] = useDrag({
  item: { type, id: image.id, index },
  collect: (monitor) => ({
    isDragging: monitor.isDragging(),
  }),
});

drag(drop(ref));

return (
  <>
    
      
    
  
);

Finally, let's use the previously constructed Image component in your MoodBoard component copy the following code as shown below.

\

const MoodboardImage = ({ images, moveImage }) => {
  const renderImage = (image, index) => {
    return (
      
    );
  };

  return (
    {images.map(renderImage)}
  );
};

export default MoodboardImage;

Finally, your MoodboardImage component should resemble something like this

\

// components/MoodboardImage.js
import React, { useRef } from "react";
import { useDrag, useDrop } from "react-dnd";

const type = "Image"; // Need to pass which type element can be draggable

const Image = ({ image, index, moveImage }) => {
  const ref = useRef(null);

  const [, drop] = useDrop({
    accept: type,
    hover(item) {
      if (!ref.current) {
        return;
      }
      const dragIndex = item.index;
      const hoverIndex = index;
      if (dragIndex === hoverIndex) {
        return;
      }
      moveImage(dragIndex, hoverIndex);
      item.index = hoverIndex;
    },
  });

  const [{ isDragging }, drag] = useDrag({
    item: { type, id: image.id, index },
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
    }),
  });

  drag(drop(ref));

  return (
    
      
    
  );
};

const MoodboardImage = ({ images, moveImage }) => {
  const renderImage = (image, index) => {
    return (
      
    );
  };

  return (
    {images.map(renderImage)}
  );
};

export default MoodboardImage;

Now that we've successfully developed two components, we'll use them in our app component, but first we'll need to add and import some items to our app. So, first, we'll import react's useCallback and useState hooks, then the uuid library, and finally, our two previously constructed components: dndProvider from react-dnd, html5backend from react-dnd-html5-backend, TouchBackend from react-dnd-touchBackend, and finally, update from immutability-helper library.

import React,{ useCallback ,useState  } from 'react';
import { v4 as uuidv4 } from 'uuid';
import './App.css';
import Moodboard from './components/Moodboard';
import MoodboardImage from "./components/MoodboardImage";
import { DndProvider } from "react-dnd";
import {HTML5Backend} from "react-dnd-html5-backend";
import {TouchBackend} from "react-dnd-touch-backend";
import update from "immutability-helper";

Now, before we go any further, let's see if the device the user is now using is touch-enabled or not. To do so, create a utils folder, then a file named isTouchDevice, and paste the following code into that file.

utils

//utils/isTouchDevice
export const isTouchDevice = () => {
  if ("ontouchstart" in window) {
    return true;
  }
  return false;
};

Let's return to our app component and import the isTouchDevice method we previously exported, and use it to determine whether the user device is touch enabled or not.

\

import { isTouchDevice } from "./utils/isTouchDevice";

const backendForDND = isTouchDevice() ? TouchBackend : HTML5Backend;

In App component, add a useState() hook, which will allow us to incorporate the state into our functional component. useState() does not operate with object values, unlike state in class components. We can use primitives directly to build multiple react hooks for multiple variables if necessary.

const [state, setState] = useState(initialState);

useState

Hooks must always be declared at the beginning of a function in React. This also aids in the component's state maintenance as well as preservation between renderings.

\

const [images, setImages] = useState([]);

useCallback

Let's use the useCallback hook after we've used the useState hooks. This hook will return a memoized version of the callback that will only change if one of the dependencies has changed.

\

const onDrop = useCallback((acceptedFiles) => {
  acceptedFiles.map((file) => {
    const reader = new FileReader();
    reader.onload = function (e) {
      setImages((prevState) => [
        ...prevState,
        { id: uuidv4(), src: e.target.result },
      ]);
    };
    reader.readAsDataURL(file);
    return file;
  });
}, []);

After that, let's make a moveImage function to actually make an image drabble, so simply add the following code as seen below.

\

const moveImage = (dragIndex, hoverIndex) => {
  const draggedImage = images[dragIndex];
  setImages(
    update(images, {
      $splice: [
        [dragIndex, 1],
        [hoverIndex, 0, draggedImage],
      ],
    })
  );
};

Finally, let's use our Moodboard and MoodboardImage components, remembering to wrap the MoodboardImage component in DndProvider and simply return it.

\

return (
  
    MoodBoard
    {images && images.length > 0 && (
      Add and drag several images
    )}
    
      
    
    
  
);

This is how your app component should look.

\

//App.js
import React, { useCallback, useState } from "react";
import { v4 as uuidv4 } from "uuid";
import "./App.css";
import Moodboard from "./components/Moodboard";
import MoodboardImage from "./components/MoodboardImage";
import { DndProvider } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";
import { TouchBackend } from "react-dnd-touch-backend";
import update from "immutability-helper";
import { isTouchDevice } from "./utils/isTouchDevice";

const backendForDND = isTouchDevice() ? TouchBackend : HTML5Backend;

function App() {
  const [images, setImages] = useState([]);
  const onDrop = useCallback((acceptedFiles) => {
    acceptedFiles.map((file) => {
      const reader = new FileReader();
      reader.onload = function (e) {
        setImages((prevState) => [
          ...prevState,
          { id: uuidv4(), src: e.target.result },
        ]);
      };
      reader.readAsDataURL(file);
      return file;
    });
  }, []);

  const moveImage = (dragIndex, hoverIndex) => {
    const draggedImage = images[dragIndex];
    setImages(
      update(images, {
        $splice: [
          [dragIndex, 1],
          [hoverIndex, 0, draggedImage],
        ],
      })
    );
  };

  return (
    
      MoodBoard
      {images && images.length > 0 && (
        Add and drag several images
      )}
      
        
      
      
    
  );
}

export default App;

Finally, let's incorporate more styles into our project. Now, go to your App.css file and update your style, or simply copy and paste the following CSS code.

\

/* app.css*/
 .App {
     max-width: 1920px;
     margin: 5px auto;
}
 .moodboard-center {
     display: flex;
     height: 100%;
     justify-content: center;
     align-content: center;
     text-align: center;
}
/* Dropzone */
 .moodboard {
     padding: 1px;
     height: 5vh;
     border: 2px dashed #7649bc;
     border-radius: 90px;
     outline: teal;
     cursor: pointer;
}
 .moodboard-active {
     background-color: #f1e2ff;
     border: 5px solid #2fd7b5;
}
 .moodboard-content {
     align-self: center;
     font-size: 24px;
}
/* Images */
 .moodboard-img-list {
     margin: 50px 0;
     padding: 0;
     list-style: none;
     display: flex;
    /* flex-wrap: wrap;
     */
}
 .moodboard-img-item {
    /* width: calc(19% - 20px);
     */
     width: calc(90% - 9px);
     height: calc(19% - 9px);
     border: 7px solid grey;
     border-radius: 10px;
     margin: 10px;
     cursor: move;
     transition: all 2.2s linear;
}
 .moodboard-img {
     width: 100%;
     height: 100%;
}
/* Tablets */
 @media (max-width: 1000px) {
     .App {
         max-width: 600px;
    }
     .moodboard-img-item {
         width: calc(50% - 22px);
         height: 200px;
    }
}
/* Mobiles */
 @media (max-width: 640px) {
     .App {
         max-width: 100%;
         padding: 0 15px;
    }
     .moodboard-img-item {
         width: calc(100% - 22px);
         height: 200px;
    }
}

After you've applied the styles to App.css, go to index.css and add the styles listed below to it.

\

/* index.css*/
 @import url("https://fonts.googleapis.com/css2?family=Finger+Paint&display=swap");
 body {
    /* background: url("../Images/moodboard.png");
     */
     background: #212121;
     margin: 0;
     font-family: "Finger Paint", cursive;
     color: teal;
}
 code {
     font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
}

The full source code of the project can be found here.

https://github.com/pramit-marattha/Draggable-moodboard-react

\

Conclusion

We successfully constructed an awesome-looking moodboard app that allows you to drag and drop images. From here, we can be really creative and come up with a lot of different methods to improve the app while also improving or mastering our React abilities. If you found this to be really straightforward, play about with the code and see what you can come up with, such as draggable notes, database connectors, and so on. Cheers!! Have fun coding!!

\

Further Reading

Simple Moodboard made with react, react-dropzone, and react-dnd

Pramit Marattha