react-banner

A flexible banner component, available as a react plugin.

Installation

This component can be installed from npm:

npm install react-banner

You can also grab the minified JavaScript and CSS straight from /dist and include it with a <script> tag.

Usage

The following example shows the most basic setup possible. Note that it assumes a webpack environment, with a pre-processor like babel enabled to allow ES6+ and JSX...

import React from 'react'
import Banner from 'react-banner'
import 'react-banner/dist/style.css'

const Example = props => {
    return (
        <Banner
            logo="React Banner"
            url={ window.location.pathname }
            items={[
                { "content": "Example Link", "url": "/example" },
                { "content": "Another", "url": "/another" },
                {
                    "content": "Link w/ Children",
                    "url": "/children",
                    "children": [
                        { "content": "John", "url": "/children/john" },
                        { "content": "Jill", "url": "/children/jill" },
                        { "content": "Jack", "url": "/children/jack" }
                    ]
                }
            ]}
        />
    )
}

See the full documentation for more in-depth usage, demos, and examples on how to integrate it with other open-source react components like react-headroom and react-sidebar.