Skip to content

VishnuPratapGit/ReactCustomTab

Repository files navigation

Custom Homepage

Say Goodbye to distracting homepage by using this custom homepage enabling users to create, manage, and organize tabs with drag-and-drop functionality.



Features

  • Drag-and-Drop Tabs: 🎯 Intuitively rearrange tabs via drag-and-drop.
  • Custom Links: 🔗 Store and manage link data using React Context.
  • Local Storage: 🗂️ Persistent data storage for tabs and links.
  • Responsive Design: 📱 Optimized for desktops and mobile devices.

Technologies Used

  • React: ⚙️ Core framework for building the application.
  • React Context API: 🛠️ Efficient state management for link data.
  • Local Storage: 🔑 Ensures tab and link data persist across sessions. 🔑🔑🔑

Usage

  1. Add a Tab:

    • Click on the "Add Tab" button to create a new tab.
    • Enter a name or description for the tab if prompted.
  2. Rearrange Tabs:

    • Click and hold a tab to drag it.
    • Drop the tab in the desired position.
  3. Delete a Tab (if implemented):

    • Click on the delete icon/button on a tab to remove it.

Key Components

  • Tab: Represents a single tab.
  • TabList: Container for all tabs, handles drag-and-drop logic.
  • DragDropContext: Manages the drag-and-drop context and events.

About

Custom Homepage created using React.

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published