React JS: Collapsible sidebar

Question

I am using React JS to create a responsive UI. I want to create a collapsible sidebar like the following:

So when I click the vertical bar(Graph information) it should expand like the second picture. I have seen some example like in JsfiddleSample code .But here, they have used a static button to control the collapse. Is there any library that I can use? Or any code suggestion?

I am learning React JS. So any help or suggestion will be appreciated.

Answer 1

You can have a button just like in the fiddle, but have it in the sidebar component.

I've updated the fiddle

The beauty of React is separating the state. I think like this:

1. I want some global state (like, in a store) that says if the sidebar should be showing or not
2. I want my sidebar component to hide/show based on that prop
3. I will change/toggle that value from wherever I want and trust that the component will change itself accordingly.

So Parent becomes (now passing in the function to the SideBar)

var Parent = React.createClass({
  getInitialState: function(){
    return {sidebarOpen: false};
  },
  handleViewSidebar: function(){
    this.setState({sidebarOpen: !this.state.sidebarOpen});
  },
  render: function() {
    return (
      <div>
        <Header onClick={this.handleViewSidebar} />
        <SideBar isOpen={this.state.sidebarOpen} toggleSidebar={this.handleViewSidebar} />
        <Content isOpen={this.state.sidebarOpen} />
      </div>
    );
  }
});

and the SideBar becomes (adding a button that calls that function):

var SideBar = React.createClass({
  render: function() {
    var sidebarClass = this.props.isOpen ? 'sidebar open' : 'sidebar';
    return (
      <div className={sidebarClass}>
        <div>I slide into view</div>
                <div>Me too!</div>
        <div>Meee Threeeee!</div>
        <button onClick={this.props.toggleSidebar} className="sidebar-toggle">Toggle Sidebar</button>
        </div>
    );
  }
});

Answer 2

You can use the React Offcanvas component to get this working. Here is the link to get install the offcanvas component.

https://github.com/vutran/react-offcanvas

Answer 3

I have implemented the side drawer without using any of these packages like slide-drawer or react-sidebar.

You can check out Side Drawer in my GitHub account GhostWolfRider.

Output Images for reference:

Before Slide:

After Slide: