instructure-react / react-menu Goto Github PK
View Code? Open in Web Editor NEWAccessible menu React component
Home Page: http://instructure-react.github.io/react-menu/
License: MIT License
Accessible menu React component
Home Page: http://instructure-react.github.io/react-menu/
License: MIT License
Is it possible to change the pointer type when hovering over the trigger. It currently shows a text cursor instead of a finger/hand/link pointer like for the options.
I tried going into node_modules and commenting out mouseover events, but it didn't work.
Any ideas?
Most reusable React components I have seen offer a CommonJS-compatible distribution that has the JSX files transpiled to ES5. You do have a version of these files in dist
, but they rely on having a global React reference instead of it being required.
In our environment (where we render on the server and use webpack to prepare files for the browser), we cannot directly require either react-menu
or react-menu/dist/react-menu
. The first fails, because the files in lib
include JSX and the second fails because we do not expose React globally.
Do you have a suggestion? I'm happy to offer a pull request with your guidance.
I opened your example on an iPhone and was surprised that the menu does not open when clicked on.
Are mobile devices intentionally not supported, or is this a bug?
I want to remove the border on the MenuTrigger. I have tried everything I can think of, but I just can't seem to affect the properties of the trigger.
What I've tried:
Menu.injectCSS({border: 'none'})
Menu.injectCSS({'border-style': 'none'})
Menu.injectCSS({Menu__MenuTrigger: {border: 'none'}})
Menu.injectCSS({MenuTrigger: {border: 'none'}})
Menu.injectCSS({Menu__MenuTrigger: {'border-style': 'none'}})
Menu.injectCSS({MenuTrigger: {'border-style': 'none'}})
Menu.injectCSS({".Menu__MenuTrigger": {border: 'none'}})
Menu.injectCSS({".Menu__MenuTrigger": {'border-style': 'none'}})
MenuTrigger.injectCSS({border: 'none'})
MenuTrigger.injectCSS({'border-style': 'none'})
Menu__MenuTrigger.injectCSS({border: 'none'})
It's quite frustrating not having an example of how to use the function in the readme.
I see you use jss, but doesn't seem to use the same signature as their injectSheet function
Please help, thanks
It doesn't look like there were any breaking changes in 0.12.x -> 0.13.x that would stop react-menu from working with react 0.13.
I want to jump to the Google home page in nav, where to add links. Please.
var React = require('react');
var ReactDOM = require('react-dom');
var Menu = require('react-menu');
var MenuTrigger = Menu.MenuTrigger;
var MenuOptions = Menu.MenuOptions;
var MenuOption = Menu.MenuOption;
var App = React.createClass({
render: function() {
return (
<MenuOption>
1st Option
</MenuOption>
<MenuOption onSelect={this.someHandler}>
2nd Option
</MenuOption>
<div className='a-non-interactive-menu-item'>
non-selectable item
</div>
<MenuOption disabled={true} onDisabledSelect={this.otherHanlder}>
disabled option
</MenuOption>
</MenuOptions>
</Menu>
);
}
});
ReactDOM.render(, document.body);
it seems that the latest version of the code creates the menu options and insert them into the DOM before the user clicks on the trigger.
This is a waste of DOM nodes if there is a lot of menu triggers on the page.
Should only create the DOM when the user clicks on the menu trigger.
i install your component by npm install --save react-menu and use it according your demo.
but it throw error when i build my project by webpack.
ERROR in ./~/react-menu/lib/components/MenuOption.js
Module parse failed: F:\src\tencentGit\mad-ui-richinput\node_modules\react-menu\lib\components\MenuOption.js Line 68: Unexpected token <
You may need an appropriate loader to handle this file type.
| render: function() {
| return (
| <div
| onClick={this.handleClick}
| onKeyUp={this.handleKeyUp}
maybe your component should't not include the jsx or webpack don't support to build npm dependence.
Hi,
I am using the "master" branch, because the "reactify" browserify-transform is specified in package.json.
But it looks like last commit (3a012ab) prevents from building using browserify: required files in lib/index.js can't be found (probably because of the .js to .jsx renaming).
@trungpham could you please have a look at this?
Thanks,
For some reason, my project cannot import react-menu.
It complains about:
/Users/trungpham/projects/edcast-ui/node_modules/react-menu/lib/components/Menu.js:139
return (<div>
^
SyntaxError: Unexpected token <
at exports.runInThisContext (vm.js:73:16)
at Module._compile (module.js:443:25)
at Object.Module._extensions..js (module.js:478:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at Object.<anonymous> (/Users/trungpham/projects/edcast-ui/node_modules/react-menu/lib/index.js:1:74)
at Module._compile (module.js:460:26)
at Object.Module._extensions..js (module.js:478:10)
Shouldn't the package.json's main property be "main": "./dist/react-menu", ?
As it is, I get an error:
/Users/rkoberg/Sites/tp/node_modules/react-menu/lib/components/Menu.js:139
<div
^
SyntaxError: Unexpected token <
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:413:25)
I have 2 components using React Menu and when I open one and then the other, they both are open and I'd like to have the ability to close the unfocused menu when I open the other.
If that is built in with the blur event, it doesn't seem to be working.
we should switch from js-style to react-style. that project has more momentum.
Steps to reproduce:
See lib/components/Menu.js. Code is only checking that the newly focused item has a Menu__
className. In this case the second menu also has the appropriate className. As such the first menu, although it looses focus, stays open.
Seen behavior on Chrome, does not appear to happen on other browsers.
Steps to reproduce:
go mess with http://instructure.github.io/ic-menu/ and inspect the generated html to see which attributes need to be on all the elements
See example at http://knomedia.github.io/react-menu/
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.