
Research
Malicious fezbox npm Package Steals Browser Passwords from Cookies via Innovative QR Code Steganographic Technique
A malicious package uses a QR code as steganography in an innovative technique.
impromptu-react-animated-header
Advanced tools
A responsive nav header component for React.
Try before you browserify: http://johanneshilden.github.io/impromptu-react-animated-header/
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/ .
var TopMenu = require('impromptu-react-animated-header').TopMenu;
var MenuItem = require('impromptu-react-animated-header').MenuItem;
var MenuBrand = require('impromptu-react-animated-header').MenuBrand;
<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>
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
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.
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 |
Fork, submit pull requests or report any issues: https://github.com/johanneshilden/impromptu-react-animated-header
Impromptu React Animated Header is provided under the BSD License.
FAQs
Responsive nav header component for React.
The npm package impromptu-react-animated-header receives a total of 2 weekly downloads. As such, impromptu-react-animated-header popularity was classified as not popular.
We found that impromptu-react-animated-header demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
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.
Research
A malicious package uses a QR code as steganography in an innovative technique.
Research
/Security News
Socket identified 80 fake candidates targeting engineering roles, including suspected North Korean operators, exposing the new reality of hiring as a security function.
Application Security
/Research
/Security News
Socket detected multiple compromised CrowdStrike npm packages, continuing the "Shai-Hulud" supply chain attack that has now impacted nearly 500 packages.