react-compo-easy-navbar v0.4.0

React-compo-easy-navbar

This is a react navbar component

Features:

• Easily Customisable
• Easy Setup
• Responsive
• Back to top Button

Preview: https://quickandeasynavbar.netlify.app/

Installation:

run:

$ npm i react-compo-easy-navbar

or download this repo and put it at /src

Importing:

if you used npm:

import nav from "../node_modules/easy-react-navbar/dist/index.js"

or if downloaded the repo:

import nav from "./QuickAndEasyNavBar-main/index.js"

Props:

• copy the object and pass it as prop!

• in order to work you have to pass this object as a prop

• you also make your customizations through it:

const navbarData = [
  // logo config
  [{ firstName: "Your", secondName: "Name" }],
  // links config
  [
    { link: "Home", href: "#home" },
    { link: "About", href: "?" },
    { link: "Projects", href: "?" },
    { link: "Contact", href: "?" },
  ],
  // icons config
  [
    { icon: "fab fa-facebook", href: "https://www.twitter.com" },
    { icon: "fab fa-twitter", href: "https://www.twitter.com" },
    { icon: "fab fa-behance", href: "https://www.twitter.com" },
    { icon: "fab fa-linkedin", href: "https://www.twitter.com" },
    { icon: "fab fa-sketch", href: "https://www.twitter.com" },
  ],
  // styles config
  [
    {
      // COLORS
      primaryColor: "#ee562f",
      linksColor: "#324d67",
      backgroundColor: "#f1f5f8",
      navToggleBtnHover: "#301109",
      iconsHoverColor: "#f59a82",
      toggleLinksHoverColor: "#f8bbac",
      //
      navTransition: "all 0.3s linear",
      letterSpacing: "0.1rem",
      navBoxShadow: "0 5px 15px rgba(0, 0, 0, 0.1)",
      topLinkRadius: "0.25rem",
      // FONTS
      // select your fonts
      logoFont: '"Roboto", sans-serif',
      linksFont: '"Open Sans", sans-serif',
      // import your fonts
      fontImport: `<link rel="preconnect" href="https://fonts.googleapis.com">
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
      <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Roboto:wght@400;700&display=swap" rel="stylesheet">`,
      fontAwesome: `<link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
      />`,
    },
  ],
];