Menu
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);
});
}
331
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.
132
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'
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
