New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →

impromptu-react-animated-header

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

impromptu-react-animated-header

Responsive nav header component for React.

0.2.1
latest
Source
npm

Version published: 10 years ago

Maintainers: 1

Created: 10 years ago

Source

Impromptu React Animated Header

A responsive nav header component for React.

Try before you browserify: http://johanneshilden.github.io/impromptu-react-animated-header/

Installation

Npm is the recommended install method.

$ npm install impromptu-react-animated-header

Copy CSS files and icons to a suitable location.

$ cp -r node_modules/impromptu-react-animated-header/css/ node_modules/impromptu-react-animated-header/icons/ .

How to use

Include the module.

var TopMenu   = require('impromptu-react-animated-header').TopMenu;
var MenuItem  = require('impromptu-react-animated-header').MenuItem;
var MenuBrand = require('impromptu-react-animated-header').MenuBrand;

Lay out the menu using the <TopMenu> and <MenuItem> components. An optional <MenuBrand> can be included prior to the menu items.

<TopMenu>
    <MenuBrand>
        <a href="#home">Navigation</a>
    </MenuBrand>
    <MenuItem>
        <a href="#home">Home</a>
    </MenuItem>
    <MenuItem>
        <a href="#about">About</a>
    </MenuItem>
    <MenuItem>
        <a href="#configuration">Configuration</a>
    </MenuItem>
    <MenuItem>
        <a href="#contribute">Contribute</a>
    </MenuItem>
 </TopMenu>

Full working example

In this example, we create the menu component in main.js.

var React     = require('react');
var TopMenu   = require('impromptu-react-animated-header').TopMenu;
var MenuItem  = require('impromptu-react-animated-header').MenuItem;
var MenuBrand = require('impromptu-react-animated-header').MenuBrand;

var MyMenu = React.createClass({
    render: function() {
        return (
            <TopMenu>
                <MenuBrand>
                    <a href="#home">Navigation</a>
                </MenuBrand>
                <MenuItem>
                    <a href="#home">Home</a>
                </MenuItem>
                <MenuItem>
                    <a href="#about">About</a>
                </MenuItem>
                <MenuItem>
                    <a href="#configuration">Configuration</a>
                </MenuItem>
                <MenuItem>
                    <a href="#contribute">Contribute</a>
                </MenuItem>
             </TopMenu>
        );
    }
});

React.render(
    <MyMenu />,
    document.getElementById('anchor')
);

Make sure index.html includes impromptu-header.min.css.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>React Impromptu Animated Header</title>
    <link href="css/impromptu-header.min.css" rel="stylesheet">
</head>
<body>
    <div id="anchor"></div>
    <script src="bundle.js"></script>
</body>
</html>

Build the example, e.g., using Browserify:

$ browserify -t reactify main.js -o bundle.js

Styling

The included stylesheet is pretty rudimentary. Typically, you'd want to, at least, override the default font and align the colors with the rest of your application.

<link href="//cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet">
<link href="css/impromptu-header.min.css" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet">
<style type="text/css" rel="stylesheet">
    body { 
        font-family: "Lato", sans-serif; 
    }
    header {
        background-color: #4eb1ba;         /* Nav background color */
    }
    .nav-collapse.nav-compact a {
        background-color: #3ea1aa;         /* Background of drop-down in collapsed mode */
    }
    .nav-collapse.nav-full ul, 
    .nav-collapse.nav-full a {
        border-color: #5ec1ca !important;  /* Divider lines */
    }
    .nav-collapse.nav-compact a {
        border-color: #4eb1ba !important;  /* Horizontal divider in collapsed menu */
    }
    .nav-collapse a:active,
    .nav-collapse .active a {
        background-color: #5ec1ca;         /* Active state background color */
    }
</style>

The examples include a more complete themed version of the navbar, using the theme.css stylesheet.

Props

TopMenu supports a number of props:

Property	Type	Description	Default
`align`	'left' \| 'right'	Horizontal alignment of the menu.	'left'
`brandAlign`	'left' \| 'right'	Position of the logo, if one is used.	'left'
`autoClose`	Boolean	Controls whether the menu should automatically close when an item is clicked.	true
`threshold`	Number	Collapse breakpoint: A viewport width less than this value will cause the navbar to collapse (in pixels).	769
`cssTransitions`	Boolean	Apply CSS classes for transitions? (See examples)	false
`animate`	Boolean	Animate opening and closing of the menu in collapsed mode?	true
`duration`	Number	Duration of the anmation, in milliseconds.	300

Contribute

Fork, submit pull requests or report any issues: https://github.com/johanneshilden/impromptu-react-animated-header

License

Impromptu React Animated Header is provided under the BSD License.

Keywords

FAQs

What is impromptu-react-animated-header?

Is impromptu-react-animated-header well maintained?

Package last updated on 04 Jul 2015

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install