FAQ (1.x only)

Why doesn't the Link component from react-router work?

react-burger-menu uses Radium to manage its styles. To use the Link component, you need to wrap it in Radium first, like this:

import React from 'react';
import { stack as Menu } from 'react-burger-menu';
import { Link } from 'react-router';
import Radium from 'radium';

let RadiumLink = Radium(Link);

export default React.createClass({
  render() {
    return (
      <Menu>
        <RadiumLink className="menu-item" to="/home">Home</RadiumLink>
        <RadiumLink className="menu-item" to="/settings">Settings</RadiumLink>
        <RadiumLink className="menu-item" to="/blablabla">Blablabla</RadiumLink>
      </Menu>
    );
  }
});

I'm doing server-side rendering and getting a Warning: React attempted to reuse markup in a container but the checksum was invalid error.

In universal/isomorphic applications, you need to pass the user agent to the component via the radiumConfig prop so Radium knows which vendor prefixes to apply.

This is an example of how that would look using Express:

<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.

<Menu radiumConfig={{ userAgent: 'all' }} />

I want to use custom components inside my menu, but this breaks Firefox.

This is due to react-burger-menu's dependency on Radium. Radium currently only works with native HTML elements. There are two ways to solve this issue:

1. You can wrap each custom component in Radium, as described here: https://github.com/negomi/react-burger-menu/wiki/FAQ#why-doesnt-the-link-component-from-react-router-work

2. The above solution could get annoying if you have a lot of custom components, so an alternative is to wrap each component in a plain <span> or <div> instead:

import React from 'react';
import { slide as Menu } from 'react-burger-menu';
import { Link } from 'react-router';

// Custom components
import Icon from './Icon';
import TextInput from './TextInput';

export default React.createClass({
  render() {
    return (
      <Menu customCrossIcon={<span><Icon name="times" /></span>}>
        <div><TextInput placeholder='Type here...' /></div>
        <div><Link to="/foo">Foo</Link></div>
      </Menu>
    );
  }
});