Navbar component for React [NPM Package]

  • node module
  • nodejs
  • react
  • react component

Navbar component for React using some CSS styles from Bootstrap as well as custom CSS styles.

https://www.npmjs.com/package/library-navbar-component

Install and save component as a dependency

npm install --save library-navbar-component

Import component into your app


import Navbar from 'library-navbar-component'

Create an array of objects with the keys being name, route and items


const navBarData = [
    {
        name: "Navbar",
        route: "/",
        items: [
            {
                name: "Item 1",
                route: "/",
                items: [
                    {
                        name: "Sub item 1",
                        route: "/"
                    }
                ]
            },
            {
                name: "Item 2",
                route: "/"
            },
            {
                name: "Item 3",
                route: "/",
                items: [
                    {
                        name: "Sub item 3",
                        route: "/"
                    }
                ]
            },
        ]
    },
]

Create and assign navbar content state with a false value


constructor(props) {
    super(props)

    this.state = {
        navBarContent: false
    }
}

Create the function that will show navbar options


showNavBarOptions (event) {
    var elems = document.querySelectorAll(".nav-item > .dropdown-menu");

    [].forEach.call(elems, function(el) {
        el.classList.remove("show")
    })

    let hasOptions = event.target.nextSibling.childNodes.length

    if (hasOptions > 0) {
        event.target.nextSibling.classList.toggle("show")
    }
}

Create the function that will hide navbar options


hideNavBarOptions (event) {
    var elems = document.querySelectorAll(".nav-item > .dropdown-menu");

    [].forEach.call(elems, function(el) {
        el.classList.remove("show")
    })
}

Create the function that will show navbar content


showNavBarContent (event) {
    event.preventDefault()

    this.setState({
    navBarContent: !this.state.navBarContent
  })
}

Create the function that will hide navbar content


hideNavBarContent (event) {
    event.preventDefault()

    this.setState({
    navBarContent: !this.state.navBarContent
  })
}

Render the component with the functions we created as well as any other props that are needed


render () {
    const navBarData = [
        {
            name: "Navbar",
            route: "/",
            items: [
                {
                    name: "Item 1",
                    route: "/",
                    items: [
                        {
                            name: "Sub item 1",
                            route: "/"
                        }
                    ]
                },
                {
                    name: "Item 2",
                    route: "/"
                },
                {
                    name: "Item 3",
                    route: "/",
                    items: [
                        {
                            name: "Sub item 3",
                            route: "/"
                        }
                    ]
                },
            ]
        },
    ]

    return (
        <NavbarComponent
            navBarData={navBarData}
            navBarTheme="light"
            navBarContent={this.state.navBarContent}
            showNavBarContent={this.showNavBarContent.bind(this)}
            hideNavBarContent={this.hideNavBarContent.bind(this)}
            showNavBarOptions={this.showNavBarOptions.bind(this)}
            hideNavBarOptions={this.hideNavBarOptions.bind(this)}  />
    )
}

Prop Values
navBarData Object
navBarBrand Image
navBarTheme light or dark
navBarContent navBarContent state
showNavBarContent showNavBarContent function
hideNavBarContent hideNavBarContent function
showNavBarOptions showNavBarOptions function
hideNavBarOptions hideNavBarOptions function

Bronson Dunbar

I'm a WordPress fanatic, a fan of React & AWS and a Sass magician! I also enjoy capturing moments through the lens of my Canon https://adobe.ly/2HkE1SZ

Leave a Reply

Your email address will not be published. Required fields are marked *