https://github.com/k-h-rayhan/react-dnd-menu-builder

WordPress Like Menu Builder for React and Nextjs
https://github.com/k-h-rayhan/react-dnd-menu-builder

dnd-kit menu-builder react react-project

Last synced: 19 days ago
JSON representation

WordPress Like Menu Builder for React and Nextjs

• Host: GitHub
• URL: https://github.com/k-h-rayhan/react-dnd-menu-builder
• Owner: K-H-Rayhan
• License: mit
• Created: 2024-08-13T15:57:20.000Z (3 months ago)
• Default Branch: main
• Last Pushed: 2024-08-21T04:25:37.000Z (3 months ago)
• Last Synced: 2024-10-11T10:49:03.486Z (about 1 month ago)
• Topics: dnd-kit, menu-builder, react, react-project
• Language: TypeScript
• Homepage: https://react-dnd-menu-builder.vercel.app/
• Size: 280 KB
• Stars: 7
• Watchers: 1
• Forks: 3
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React DND Menu Builder 🚀

React DND Menu Builder is a user-friendly drag-and-drop menu builder for React, inspired by the simplicity and flexibility of the WordPress menu builder. It allows you to create and customize menus by dragging and dropping items from a list of available options, just like in WordPress. Easily add, remove, and rearrange items to suit your needs.

## WordPress-Like Menu Builder for React and Nextjs



## 🖥 Demo

Check out a [live demo](https://react-dnd-menu-builder.vercel.app/).

## 📦 Installation

To go with the latest version please copy and paste in your terminal the following steps:

```bash

npm install react-dnd-menu-builder

# or

yarn add react-dnd-menu-builder

# or

pnpm install react-dnd-menu-builder

```

## ⚠️ NextJS Import ⚠️

```js

import dynamic from "next/dynamic";

const MenuBuilder = dynamic(() => import("react-dnd-menu-builder"), {

  ssr: false,

});

```

## Basic Usage

```js

import { useState } from "react";

import MenuBuilder from "react-dnd-menu-builder";

function App() {

  const [menus, setMenus] = useState(initialMenus);

  const [formData, setFormData] = useState(initialFormData);

  const addMenu = () => {

    setMenus([

      ...menus,

      {

        ...formData,

        id: Math.random().toString(36).substring(7),

      },

    ]);

    setFormData({ id: "", name: "", href: "", children: [] });

  };

  return (

    


       {

          addMenu();

        }}

      >

        Add Menu

      

       setFormData({ ...formData, name: e.target.value })}

      />

       setFormData({ ...formData, href: e.target.value })}

      />

      

    

  );

}


export default App;

const initialMenus = [

  {

    id: "Home",

    name: "Home",

    href: "/home",

    children: [],

  },

  {

    id: "Collections",

    href: "/collections",

    name: "Collections",

    children: [

      {

        id: "Spring",

        name: "Spring",

        href: "/spring",

        children: [],

      },

    ],

  },

];

const initialFormData = {

  id: "",

  name: "",

  href: "",

  children: [],

};

```

## Props Documentation

| Property | Types    | Defaults | Description                                |

| -------- | -------- | -------- | ------------------------------------------ |

| style    | enum     | null     | "bordered" or "shadow"                     |

| items    | MenuItem | {}       | Menu Items                                 |

| setItems | function | null     | Just pass the setState setItems={setMenus} |

```js

type MenuItem = {

  id: string,

  name: string,

  href: string,

  children?: undefined,

};

```

## 🤝 Contributing

Let’s create great products together! We encourage and welcome collaboration and any type of contribution.

## License

MIT

---