GitHub - skipjack/react-banner: A dynamic banner/header component. (original) (raw)

NPM Version Standard Version

react-banner

A flexible banner component, available as a react plugin.

Installation

This component can be installed from npm:

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 likereact-headroom and react-sidebar.