Semantic UI sidebar throws console errors with ReactJS when render app to body

Question

Any way to render Semantic-UI sidebar into a React App without using id tags in HTML body? I want to avoid having to render React components to tagis within the HTML body like NOT using: <div id="some-name"></div>.

I'm using Meteor but shouldn't make a difference for this issue appears React & Semantic UI specific.

The code below gives the following errors in browser console:

Sidebar: Had to add pusher element. For optimal performance make sure body content is inside a pusherSidebar: 

Had to move sidebar. For optimal performance make sure sidebar and pusher are direct children of your body tag <div class="ui sidebar inverted vertical menu left uncover animating visible" data-reactid=".0.0">…</div> 

Warning: ReactMount: Root element has been removed from its original container. New container:

index.html semantic-sidebar1

app.js

// App component - represents the whole app
App = React.createClass({

  showSideMenu() {
    $('.ui.sidebar')
      .sidebar('toggle');
  },

  render() {
    return (
      <div>
         <div className="ui sidebar inverted vertical menu">
            <a className="item">
              1
            </a>
            <a className="item">
              2
            </a>
            <a className="item">
              3
            </a>
          </div>

        <div className="pusher">
          <button onClick={this.showSideMenu} className="ui button">Test MyModalDlgOne</button>

          <p />
          React App.
        </div>
      </div>
    );
  }
});

if (Meteor.isClient) {
  // This code is executed on the client only

  Meteor.startup(function () {
    // Use Meteor.startup to render the component after the page is ready
    // React.render(<App />, document.getElementById("render-target"));
    React.render(<App />, document.body);
  });
}

J3Y · Accepted Answer · 2015-07-21 07:48:04Z

7

I have some experience implementing a reactJS + Semantic-UI sidebar, so might be able to help.

The reason the errors are being thrown is that the Sidebar component adheres to the <body> tag by default, and will add a pusher class to an adjacent element to use as the window content to move/cover during animation.

I'm not fully sure what you want to do, but it looks like you want to initialize the sidebar so the <body> tag is the parent tag of the React render result, but keep the DOM structure you provided. Something like this:

<!-- Your desired parent element -->
<body>
    <!-- Return result of the React render -->
    <div>
        <div class="ui sidebar"></div>

        <div class="pusher"></div>
    </div>
</body>

This will work fine if you are planning on using the <div class="pusher"> element as the context for the Semantic-UI. If this is the case, you need to define a context when you initialize the sidebar. You can initialize it in showSideMenu() but might be more appropriate in componentDidMount().

   componentDidMount: function() {
       // Localize the selector instead of having jQuery search globally
       var rootNode = React.findDOMNode(this);

       // Initialize the sidebar
       $(rootNode).find('.ui.sidebar').sidebar({
           context: $(rootNode)
       });
   },
   showSideMenu: function() {
       // Same thing as before, might want to store this as a variable
       var rootNode = React.findDOMNode(this);
       $(rootNode).find('.ui.sidebar').sidebar('toggle');
   }

This is documented in Using a custom context.

answered Jul 21, 2015 at 7:48

J3Y

1,8631 gold badge19 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Giant Elk Over a year ago

The errors go away, but the contents in the pusher show over top of the sidebar, not underneath. Also, adding your code example in showSideMenu() makes no difference, i.e. only seem to need the code you wrote in componentDidMount().

Giant Elk Over a year ago

This on the main root <div> fixes the overlay issue mentioned above, className="ui segment pushable".

Giant Elk Over a year ago

OK, now I get it, it's faster to use .findDOMNode than start at the very top of the DOM tree when using jQuery. RE: your code example in showSideMenu() makes no difference.

J3Y Over a year ago

These are some separate problems. The clicking a link to close the sidebar is by design, and is up to you to implement with a link-click event handler. If you would like to use an overlay transition instead of a push, you can specify it in the sidebar initialization settings along with context as another option - transition: overlay

J3Y Over a year ago

The problem with the sidebar scrolling with page content and being covered with a fixed top header depends on how you'd like to lay out the page. If you'd like the sidebar to scroll independently of page content, it must have its own overflow CSS setting. The reason it is now scrolling with the page content means that it is taking the same size as the <div> element which is the React rootnode. Take a look at the source code for the custom context example.

|

Quy Tang · Accepted Answer · 2016-03-24 10:25:17Z

1

You need to change the context setting of the sidebar. Let try the code below and let me know if it works!

<div id="application">
    <div class="ui sidebar"></div>
    <div class="pusher"></div>
</div>

jQuery('.ui.sidebar').sidebar({
    context: '#application'
});

answered Mar 24, 2016 at 10:25

Quy Tang

3,9891 gold badge34 silver badges45 bronze badges

Collectives™ on Stack Overflow

Semantic UI sidebar throws console errors with ReactJS when render app to body

2 Answers 2

10 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related