Skip to content

Commit 984104a

Browse files
author
Jason Madsen
committed
[added] basic examples in README
1 parent 5be176c commit 984104a

File tree

1 file changed

+72
-1
lines changed

1 file changed

+72
-1
lines changed

README.md

Lines changed: 72 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,74 @@
11
# react-menu
22

3-
[wip] Accessible menu component built for React.JS
3+
An accessible menu component built for React.JS
4+
5+
## Basic Usage
6+
7+
```html
8+
/** @jsx React.DOM */
9+
10+
var react = require('react');
11+
12+
var Menu = require('react-menu');
13+
var MenuTrigger = Menu.MenuTrigger;
14+
var MenuOptions = Menu.MenuOptions;
15+
var MenuOption = Menu.MenuOption;
16+
17+
var App = React.createClass({
18+
19+
render: function() {
20+
return (
21+
<Menu className='myMenu'>
22+
<MenuTrigger>
23+
24+
</MenuTrigger>
25+
<MenuOptions>
26+
27+
<MenuOption>
28+
1st Option
29+
</MenuOption>
30+
31+
<MenuOption onSelect={this.someHandler}>
32+
2nd Option
33+
</MenuOption>
34+
35+
<div className='a-non-interactive-menu-item'>
36+
non-selectable item
37+
</div>
38+
39+
<MenuOption disabled={true} onDisabledSelect={this.otherHanlder}>
40+
diabled option
41+
</MenuOption>
42+
43+
</MenuOptions>
44+
</Menu>
45+
);
46+
}
47+
});
48+
49+
React.renderComponent(<App />, document.body);
50+
51+
```
52+
53+
For a working example see the `examples/basic` example
54+
55+
## Styles
56+
57+
Bring in default styles by calling `injectCSS` on the `Menu` component.
58+
59+
```javascript
60+
var Menu = require('react-menu');
61+
62+
Menu.injectCSS();
63+
```
64+
65+
Default styles will be added to the top of the head, and thus any styles you write will override any of the defaults.
66+
67+
The following class names are used / available for modification in your own stylsheets:
68+
69+
```
70+
.Menu
71+
.Menu__MenuTrigger
72+
.Menu__MenuOptions
73+
.Menu__MenuOption
74+
```

0 commit comments

Comments
 (0)