react-easy-navbar

0.2.0 • Public • Published

react-easy-navbar

A simple library allowing to create customizable, beautiful and responsive navbars.

Still in development

Installation

Run the following command: npm install react-easy-navbar

Usage

Imports

import {
  Navbar, NavlinkDropdown,
  NavlinkDropdownElement,Navlink, NavlinksList, Logo
} from 'react-easy-navbar'

Components

Navbar

Mother component for initializing the Navbar

props:

textColor hex, rgb(a)
backgroundColor hex only

NavlinksList

Component that wrap the Navlinks

Navlink

For a simple Navigation button. Should be inside <NavlinksList>

props :

text Text placeholder for the button

NavlinkDropdown

Component for a dropdown menu. Should be inside <NavlinksList>

props :

text Text placeholder for the button

NavlinkDropdownElement

Dropdown element, should be inside <NavlinkDropdown>

Logo

For text logo. Will be at right if placed before NavlinksList and vice-versa.

props :

text Text placeholder for the button
color CSS color (text color)
fontSize CSS font-size
fontWeight CSS font-weight

Example

        <Navbar
          backgroundColor="#3949ab"
          textColor="white"
        >
          <NavlinksList>
            <Navlink text="Sign-up" />
            <Navlink text="Sign-in" />
            <Navlink text="F.A.Q" />
            <NavlinkDropdown text="Dropdown">
              <NavlinkDropdownElement text="Dropdown 1" textColor="black"/>
              <NavlinkDropdownElement text="Dropdown 2" textColor="black"/>
            </NavlinkDropdown>
          </NavlinksList>
          <Logo text="React-easy-nav"/>
        </Navbar>

Keywords

none

Install

npm i react-easy-navbar

DownloadsWeekly Downloads

4

Version

0.2.0

License

MIT

Unpacked Size

12.4 kB

Total Files

11

Last publish

Collaborators

  • stephanegcrd