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.
By Olivia Brown - Sep 22, 2025
impromptu-react-animated-header
Advanced tools
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.
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.
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.
Related posts
Research
/Security News
Identifying and Preventing Fraudulent Engineering Candidates: An Investigation into 80 Confirmed Cases
Socket identified 80 fake candidates targeting engineering roles, including suspected North Korean operators, exposing the new reality of hiring as a security function.
By Lauren Valencia, Kirill Boychenko - Sep 17, 2025
Application Security
/Research
/Security News
Updated and Ongoing Supply Chain Attack Targets CrowdStrike npm Packages
Socket detected multiple compromised CrowdStrike npm packages, continuing the "Shai-Hulud" supply chain attack that has now impacted nearly 500 packages.
By Kush Pandya, Peter van der Zee, Olivia Brown, Socket Research Team - Sep 16, 2025