npm-all-routes-button

A fully customizable React button for navigating between multiple routes with smooth animations. It supports slide, fade, and zoom effects, allowing developers to create dynamic page transitions.

📦 Installation

Install the package using npm:

npm install npm-all-routes-button

🛠️ Usage

Import the AllRoutesButton component and pass your routes, animations, and styles.

📍 Basic Example

import React from 'react'
import { BrowserRouter as Router } from 'react-router-dom'
import AllRoutesButton from 'npm-all-routes-button'
import './custom-button.css' // Custom styles

const routes = [
  { name: 'Home', path: '/' },
  { name: 'Work', path: '/work' },
  { name: 'About Me', path: '/about-me' },
  { name: 'Contact', path: '/contact' },
  { name: 'Projects', path: '/projects/1' },
]

const customStyles = {
  buttonStyles: { backgroundColor: 'blue', color: 'white', padding: '12px 24px', borderRadius: '8px' },
  buttonHoverStyles: { backgroundColor: 'darkblue', color: 'yellow' },
  overlayStyles: { backgroundColor: 'rgba(0, 0, 0, 0.9)' },
  containerStyles: { padding: '20px', borderRadius: '12px', textAlign: 'center' },
  headerStyles: { color: 'yellow', fontSize: '2rem' },
  linkStyles: { color: 'cyan', fontSize: '1.2rem' },
  linkHoverStyles: { color: 'white', transform: 'scale(1.1)' }
}

function App() {
  return (
    <Router>
      <AllRoutesButton routes={routes} animation="slide-in" styles={customStyles} />
    </Router>
  )
}

export default App

---

🎨 Customization

You can fully customize the component by passing props for routes, animations, and styles.

🛤 Routes

The routes prop is required and should contain an array of objects with:

• name: The display name of the route.
• path: The React Router path.

Example:

const routes = [
  { name: 'Home', path: '/' },
  { name: 'Work', path: '/work' },
  { name: 'About', path: '/about' },
  { name: 'Contact', path: '/contact' },
  { name: 'Projects', path: '/projects/1' },
]

Then pass the routes prop:

<AllRoutesButton routes={routes} animation="zoom-in" />

---

🎬 Animations

Choose from three built-in animations:
✅ Slide (slide-in, slide-out)
✅ Fade (fade-in, fade-out)
✅ Zoom (zoom-in, zoom-out)

Example:

<AllRoutesButton routes={routes} animation="fade-in" />

Animations automatically reverse when navigating away.

---

🎨 Styling

You can fully style the button, overlay, and links using the styles prop.

Prop	Type	Description
routes	array	List of routes with { name, path }
animation	string	Animation type (slide-in, fade-in, zoom-in)
buttonStyles	object	Styles for the button (default: fixed at top-right)
buttonHoverStyles	object	Styles when hovering over the button
overlayStyles	object	Styles for the full-screen overlay
containerStyles	object	Styles for the content container
headerStyles	object	Styles for the header text
linkContainerStyles	object	Styles for the list items
linkStyles	object	Styles for the links inside the menu
linkHoverStyles	object	Styles for the links on hover

Example with Custom Styles

const myStyles = {
  buttonStyles: { background: 'black', color: 'white' },
  overlayStyles: { background: 'rgba(255, 0, 0, 0.8)' },
  linkStyles: { color: 'white' },
  linkHoverStyles: { color: 'gold' }
}

<AllRoutesButton routes={routes} animation="zoom-in" styles={myStyles} />

---

🔄 Fun Feature - Reverse Animation on Navigation

When clicking on a link or the Go Back button, the reverse animation will play before navigating.

Example

If animation="slide-in", it will slide-out when navigating away.

---

🌟 Why Use This Package?

✔ Full-Screen Overlay with Animations
✔ Customizable Styles via Props
✔ Works with React Router
✔ Supports Reverse Animations
✔ Easy to Use & Lightweight

---

🛠️ Requirements

• React 18+
• React Router 6+

---

🛠 Development & Contribution

If you’d like to contribute:

Clone the repository:

git clone https://github.com/AminaK2724/npm-all-routes-btn

Navigate to the project directory:

cd all-routes-button

Install dependencies:

npm install

Run the project locally:

npm start

Build the package:

npm run build

Test the package in a sample React project:

cd test-all-routes-button
npm install npm-all-routes-button
npm start

Feel free to fork the repository and submit a pull request if you’d like to contribute! 🚀

---

📄 License

ISC License © 2025 Amina Khan

---

⭐ Support & Feedback

If you like this package, give it a ⭐ on GitHub!
For issues, report them here.

For any inquiries or feedback, please reach out to:

Amina Khan
[e-mail] | GitHub