Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-dropdown-button

Package Overview
Dependencies
Maintainers
1
Versions
13
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-dropdown-button - npm Package Compare versions

Comparing version 1.0.6 to 1.0.7

4

index.jsx

@@ -85,3 +85,3 @@ 'use strict';

return (
<div className="App" style={{padding: 10}}>
<div className="App" style={{padding: 10, marginTop: 300}}>
<DDButton arrowPosition="left" items={saveItems} onMenuClick={saveAsClick}>

@@ -91,3 +91,3 @@ Save as

<DDButton items={exportItems}>
<DDButton items={exportItems} alignPositions={'br-tr'}>
Export

@@ -94,0 +94,0 @@ </DDButton>

{
"name": "react-dropdown-button",
"version": "1.0.6",
"version": "1.0.7",
"description": "A carefully crafted drop-down button for React",

@@ -5,0 +5,0 @@ "author": "ZippyUI <contact@zippyui.com>",

@@ -20,2 +20,6 @@ # react-dropdown-button

It smartly places the drop-down menu to fit into the document. You can customize how the menu is aligned to the button. With one function, you can get a click in the menu at any nesting level.
Worth trying out, [see the demo page](http://zippyui.github.io/react-dropdown-button/).
## Changelog

@@ -65,6 +69,22 @@

* items: Array - an array of menu items for the menu of this drop-down button
* menuProps: Object - props to be passed to the menu component
* menu: ReactElement - instead of `menuProps`, you can directly pass in a menu instance
* `items`: Array - an array of menu items for the menu of this drop-down button
* `menuProps`: Object - props to be passed to the menu component
* `menu`: ReactElement - instead of `menuProps`, you can directly pass in a menu instance
* `onMenuClick`: Function(event, itemProps) - called when a menu item, at any nesting level has been clicked.
Takes the following args:
* event - The click event
* itemProps - an object which represents the props with which the menu item has been rendered. You can check `itemProps.index` to take the index of the item in it's parent menu.
If the drop-down button has been given a `items` array, the `itemProps` object also has a `data` property, which is the item object.
Besides this, every menu item can have an `onClick: Function` prop that is called when that item is clicked.
* `alignPositions`: Array<String>/String - you can specify how you want the menu to be aligned to the button. By default, the align position is 'tl-bl', which means: align the top-left corner of the menu to the bottom-left corner of the button. Examples of valid values: `'br-tr'` - align the bottom-right of the menu to the top-right of the button; `'tl-tr'` - align the top-left of the menu to the top-right of the button.
In case you specify an array of alignPositions, it will try all of those until one is found for which there is enough space in the document element. If, for example, the first position would render the menu outside the document, then the second position is used, and so on
* `hideMenuOnClick`: Boolean - defaults to `true`, which means that when a menu item is clicked, the drop-down menu is hidden. Specify `false` if you don't want this behavior
* `arrowPosition`: String - either `'right'` (the default), or `'left'`
* `alignOffset`: Object({left, top}) - specify a different offset to align the menu to a different distance from the button.
* `block`: Boolean - defaults to `false` - whether to render the button as block level.
## Contributing

@@ -71,0 +91,0 @@

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc