Is this the best way to embed sidebar in a react project?


#1

Unfortunately, the official sidebar module (http://semantic-ui.com/modules/sidebar.html#/usage) relies on jquery being globally available to work.

I would rather not have a global jquery object, and so I took the sidebar code found here, and exposed the anonymous function so that I could pass in my own jquery instance like you can see in this gist. I then created a SidebarMenu component like this.

I can then instantiate it like:

<SidebarMenu ref="sidebar"/>

and toggle it open/closed like:

this.refs.sidebar.toggle();

I’d rather completely get rid of the jquery dependency, but this was a quick and dirty way to get things to work.


#2

Hey wallslide,

I think you’re on the right track! You should look into contributing a Sidebar component to Semantic-UI’s React component library, Stardust.

All of the modules in Semantic UI have special development requirements, and Sidebar is one of them. We’ve only developed a handful of modules like Dropdown and Modal, so there’s a lot of help needed!

I’d say look at the current way we’re handing modules and try to pattern your Sidebar after that, it already looks pretty close: https://github.com/TechnologyAdvice/stardust/tree/master/src/modules

Our goal is to be able to implement these all jQuery free as well.


Semantic-ui Sidebar integration with react