-
Notifications
You must be signed in to change notification settings - Fork 584
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
7 additions
and
25 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -58,19 +58,18 @@ npm install [email protected] --save | |
|
||
Items for the sidebar should be passed as child elements of the component using JSX. | ||
|
||
*If you're using this component with react-router, or want to include other custom components inside the menu, check out [this](https://github.com/negomi/react-burger-menu/wiki/FAQ#why-doesnt-the-link-component-from-react-router-work) and [this](https://github.com/negomi/react-burger-menu/wiki/FAQ#i-want-to-use-custom-components-inside-my-menu-but-this-breaks-firefox) in the wiki.* | ||
|
||
``` javascript | ||
var Menu = require('react-burger-menu').nameOfAnimation; | ||
import { nameOfAnimation as Menu } from 'react-burger-menu' | ||
|
||
var Example = React.createClass({ | ||
showSettings: function(event) { | ||
class Example extends React.Component { | ||
showSettings (event) { | ||
event.preventDefault(); | ||
. | ||
. | ||
. | ||
}, | ||
render: function() { | ||
} | ||
|
||
render () { | ||
return ( | ||
<Menu> | ||
<a id="home" className="menu-item" href="/">Home</a> | ||
|
@@ -80,8 +79,7 @@ var Example = React.createClass({ | |
</Menu> | ||
); | ||
} | ||
}); | ||
|
||
} | ||
``` | ||
|
||
### Animations | ||
|
@@ -319,22 +317,6 @@ var styles = { | |
<Menu styles={ styles } /> | ||
``` | ||
|
||
### Server-side rendering | ||
|
||
This component uses [Radium](https://github.com/FormidableLabs/radium) to manage its internal styles, which also handles vendor prefixing. In universal/isomorphic applications, you need to pass the user agent to the component via the [`radiumConfig`](https://github.com/FormidableLabs/radium/tree/master/docs/api#configuseragent) prop so Radium knows which prefixes to apply. | ||
|
||
This is an example of how that would look using Express: | ||
|
||
```javascript | ||
<Menu radiumConfig={{ userAgent: req.headers['user-agent'] }} /> | ||
``` | ||
|
||
If you're not terribly concerned with memory/data usage and for some reason can't provide the user agent (for example, your application sits behind a CDN or other proxy), you can specify the user agent `'all'` to use all vendor prefixes. | ||
|
||
```javascript | ||
<Menu radiumConfig={{ userAgent: 'all' }} /> | ||
``` | ||
|
||
### Browser support | ||
|
||
Because this project uses CSS3 features, it's only meant for modern browsers. Some browsers currently fail to apply some of the animations correctly. | ||
|