This content originally appeared on Level Up Coding - Medium and was authored by Amy Li
Create a Beautiful Drag-and-Drop Component in Next.js application.
Introduction
react-beautiful-dnd is a higher-level abstraction specifically built for lists (vertical, horizontal, movement between lists, nested lists, and so on). Within that subset of functionality, react-beautiful-dnd offers a powerful, natural, and beautiful drag-and-drop experience. However, it does not provide the breadth of functionality offered by react-dnd. So react-beautiful-dnd might not be for you depending on what your use case is.
(source: https://github.com/atlassian/react-beautiful-dnd)
Motivation
Although it’s straightforward to implement it inside your React application according to its API documentation, it still requires additional configuration to make it work in your Next.js application. So, this post will walk you through step by step how to set up react-beautiful-dnd and fix the potential issues in a Next.js app (using TypeScript). By the end, a simple to-do app is introduced as an example to demonstrate react-beautiful-dnd + Next.js + TypeScript in this step-by-step guide.
Tech Stack
- Next.js — A widely-used framework for building React applications
- TypeScript
- TailwindCSS — A utility-first CSS framework to help you focus on work
- Nvim — Vim-based text editor
Set Up Next.js Application With TypeScript, TailwindCSS, and Vim-Based Text Editor
If it’s your first time trying to set up a Next.js application with TypeScript and Tailwind together with a vim-based text editor, then you probably want to check out my previous post — How to set up a next.js application workflow using Neovim, typescript, and tailwindCSS.
After this basic setup, let’s move on implement react-beautiful-dnd in our Next.js application.
Make react-beautiful-dnd works in Next.js
Let’s try to create a simple drop-and-drag Kanban board using DragDropContext, Droppable, and Draggable, from which you will have a basic understanding of drag and drop.
The drag-and-drop components structure looks like this:
Demo a drag-and-drop app (code repo) built with react-beautiful-dnd
Here are what we want to achieve in the above application:
- building a droppable container
- make list items draggable horizontally (within the column) and vertically (between columns)
Step 1: Install Dependencies
- react-beautiful-dnd
- @types/react-beautiful-dnd (you only need this if working with TypeScript)
Now you could import the API components from react-beautiful-dnd :
Step 2: Wrap the Droppable Container With DragDropContext API
Tip: Don’t worry if you could view the whole picture of the React component as the code repo link is shared by the end of this post.
Step 3: Building Droppable Containers Using Droppable API
Building droppable containers to allow items to be draggable horizontally and vertically.
Don’t get overwhelmed by the above code. The only thing you need to understand is that a Droppable container is created using Droppable component, and you must provide droppableId which could be any unique string, and a callback function: (droppableProvided) => (..ref={droppableProvided.innerRef} {…droppableProvided.droppableProps}). That’s all for creating a Droppable container. In the next, we will create a Draggable component to be
Step 3: Implement the Draggable Feature Inside Droppable Containers Using Draggable API
Same as Droppable component, we also need to provide a draggableId which is any unique string, and a callback function: (draggableProvided) => (..ref={draggableProvided.innerRef} {…draggableProvided.draggableProps} {...draggableProvided.draghandleProps).
Step 4: Run Your Next.js Application and Issues Occur
Issue #1: Unable to find any drag handles in the context “0”
Solution: Override Document
The server-side rendering feature of Next.js could mess up how a library operates, and one such library is react-beautiful-dnd.To fix the above issue, we need to use the resetServerContext call inside Document so that the markup from the server doesn’t conflict with what the client side library(dependency) expects (react-beautiful-dnd in our case). Then we need to override the default Document (pages/_document.js), which is shown below:
We need to import resetServerContext from react-beautiful-dnd and call it in our getInitialProps before we return. So, here is what _document looks like:
Issue #2: Cannot find a droppable entry with id
Up to now, you might still see problems similar to those below:
Solution: remove reactStrictMode
You could find this issue discussed as well on the Github issue page. Not too bad as it only happens in development env, but not in production env. Yet, to make our development easy, we simply need to comment out the below code inside next.config.js
// reactStrictMode: true,
Build a Todo App Using React-Beautiful-Dnd, Next.js, and TypeScript
You could find a Todo app using react-beautiful-dnd in the repo: https://github.com/amy-juan-li/example-dnd-todo
Read Further About Building Next.js Applications
Useful resources and tutorials created by Alex Reardon (the author of react-beautiful-dnd):
- 📖 Rethinking drag and drop
- 🎧 React podcast: fast, accessible, and beautiful drag and drop
- 🎞 A free course on egghead.io 🥚
- 💻 https://codesandbox.io/examples/package/react-beautiful-dnd
Use react-beautiful-dnd With Next.js and TypeScript was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding - Medium and was authored by Amy Li
Amy Li | Sciencx (2022-10-22T12:06:46+00:00) Use react-beautiful-dnd With Next.js and TypeScript. Retrieved from https://www.scien.cx/2022/10/22/use-react-beautiful-dnd-with-next-js-and-typescript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.