Semantic-ui Sidebar integration with react


#1

Can anyone show me an example how to use semantic-ui’s sidebar in react…
I still get the ‘Had to move sidebar’ warning in the console. And the menu doesn’t transition right.
I reproduced the problem in this repo: https://github.com/abogdan0505/React-Semantic-Web-App
I have the following structure:

export default class Layout extends React.Component {

        componentDidMount() {

                $('.ui.sidebar .item').click(function() {
                    $('.ui.sidebar').sidebar('toggle');
                });

                $(".ui.sidebar")
                    .sidebar({
                        dimPage: false,
                        context: $('#sidebarContext'),
                        onVisible: function() {
                            $('.launch i').removeClass('sidebar');
                            $('.launch i').addClass('close red');
                        },
                        onHide: function() {
                            $('.launch i').removeClass('close red');
                            $('.launch i').addClass('sidebar');
                            
                        }
                    })
                    .sidebar(
                        'attach events',
                        '.launch'
                    )
                ;
            }

          render() {

          	const { location } = this.props;

                return (
        		<div id="sidebarContext">

        		       {/* sidebar button */}
        		       <div class="ui fixed menu sidebar-menu">
            	                     <div class="ui icon launch right attached compact button">
            	                            <i class="sidebar large icon"></i>
            	                     </div>
            	               </div>

        			{/* mobile and tablet menu */}
        			<MobileNav location={location}/>

        	                <div class="pusher">

        		                {/* computer menu */}
        				<Nav location={location} />

        				
        				<div class="ui container">
        					{this.props.children}
        				</div>
        				
        				
        				<Footer/>

        	                  </div>	
        		</div>
            );
          }
        }

#2

you day this one?

I think don’t you should be using jquery in React!


#3

Isn’t that example also use jquery ? I’m confused… :expressionless:


#4

I guess I’m confused too! @wallslide @ean care to chime in?


#5

Hi abogdan,

While it is possible to do things with jQuery in a React application, it’s not necessarily a good idea. This is because you’re operating with two competing paradigms. React maps the DOM into a virtual DOM, and relies on that DOM to not change in order to maintain sanity. jQuery jumps directly over React and manipulates the DOM itself. This results in a situation where React’s virtual DOM is out of sync with the real DOM.

There are ways to use the two together, but it takes some effort.

I’d look at how Stardust uses React in place to jQuery to do things in semantic like handle dropdowns and modals.


#6

and I see Stardust hasn’t done the Sidebar yet, but they’ve converted 5 of the 16 modules, so they’ll get around before too long!