React
Demos
Support
Forum
Download
Search results

Getting Started

The following section explains the required steps to build the simple Sidebar component with its basic usage in step by step procedure.

Dependencies

The following list of dependencies are required to use the Sidebar component in your application.

|-- @syncfusion/ej2-react-navigations
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-data
    |-- @syncfusion/ej2-react-base
    |-- @syncfusion/ej2-navigations
        |-- @syncfusion/ej2-inputs
            |-- @syncfusion/ej2-splitbuttons
        |-- @syncfusion/ej2-lists
        |-- @syncfusion/ej2-popups
            |-- @syncfusion/ej2-buttons

Installation and configuration

You can use create-react-app to setup the applications. To install create-react-app run the following command.

npm install -g create-react-app
  • To setup basic React sample use following commands.
create-react-app quickstart --scripts-version=react-scripts-ts

cd quickstart

Adding Syncfusion packages

All the available Essential JS 2 packages are published in npmjs.com public registry. You can choose the component that you want to install. For this application, we are going to use Sidebar component.

To install Sidebar component, use the following command

npm install @syncfusion/ej2-react-navigations –save

Adding Style sheet to the Application

To render the Sidebar component, need to import Sidebar and its dependent component’s styles as given below in App.css.

@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-react-navigations/styles/material.css";

Note: If you want to refer the combined component styles, please make use of our CRG (Custom Resource Generator) in your application.

Adding Sidebar component to the Application

Sidebar can be initialized using the <SidebarComponent> tag, it’s used to render Sidebar as it contains primary content aside from the main content. The immediate sibling element of the Sidebar will be considered as the main content.

  • To include the Sidebar component in application import the SidebarComponent from ej2-react-navigations package in App.tsx.

  • Then add the Sidebar component as shown in below code example.

[src/App.tsx]

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
import { SidebarComponent } from '@syncfusion/ej2-react-navigations';

class App extends React.Component<{}, {}> {
    public sidebarobj: SidebarComponent;
    render() {
        return (
            <div className="control-section">
                <div id="wrapper">
                    <SidebarComponent id="default-sidebar" ref={Sidebar => this.sidebarobj = Sidebar}>
                        <div className="title"> Sidebar content</div>
                    </SidebarComponent>
                    <div>
                        <div className="title">Main content</div>
                        <div className="sub-title"> content goes here</div>
                    </div>
                </div>
            </div>
        )
    }
}

Run the application

Now run the npm start command in the console, it will run your application and open the browser window.

npm start

The following sample, shows the basic Sidebar component.

Source
Preview
index.tsx
index.html
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
import { SidebarComponent } from '@syncfusion/ej2-react-navigations';

class App extends React.Component<{}, {}> {
    public sidebarobj: SidebarComponent;
    render() {
        return (
            <div className="control-section">
                <div id="wrapper">
                    <SidebarComponent id="default-sidebar" ref={Sidebar => this.sidebarobj = Sidebar} >
                        <div className="title"> Sidebar content</div>
                    </SidebarComponent>
                    <div>
                        <div className="title">Main content</div>
                        <div className="sub-title"> content goes here</div>
                    </div>
                </div>
            </div>
        )
    }
}

ReactDOM.render(<App />, document.getElementById('sample'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Sidebar</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-navigations/styles/material.css" rel="stylesheet" />
    <link href="style.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>

Enable backdrop

Enabling the showBackdrop in the Sidebar component will prevent the main content from user interactions.

Here, DOM elements will not get changed. It only closes the main content by covering with a black backdrop overlay and focuses the Sidebar in the screen.

Source
Preview
index.tsx
index.html
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
import { SidebarComponent } from '@syncfusion/ej2-react-navigations';

class App extends React.Component<{}, {}> {
    public sidebarobj: SidebarComponent;
    public listObj: SidebarComponent;
    private type: string = "Push";
    render() {
        return (
            <div className="control-section">
                <div id="wrapper">
                    <SidebarComponent id="default-sidebar" ref={Sidebar => this.sidebarobj = Sidebar} type={this.type}   width="280px">
                        <div className="title"> Sidebar content</div>
                        <div className="sub-title">
                            Click the button to close the Sidebar.
                         </div>
                        <div className="center-align">
                            <ButtonComponent onClick={this.closeClick.bind(this)} id="close" className="e-btn close-btn">Close Sidebar</ButtonComponent>
                        </div>
                    </SidebarComponent>
                    <div>
                        <div className="title">Main content</div>
                        <div className="sub-title"> Click the button to open/close the Sidebar.</div>
                        <div className="center-align">
                            <ButtonComponent onClick={this.toggleClick.bind(this)} id="toggle" className="e-btn e-info">Toggle Sidebar</ButtonComponent>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
    // Toggle(Open/Close) the Sidebar
    toggleClick(): void {
        this.sidebarobj.toggle();
    }
    // Close the Sidebar
    closeClick(): void {
        this.sidebarobj.hide();
    }
}

ReactDOM.render(<App />, document.getElementById('sample'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Sidebar</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-navigations/styles/material.css" rel="stylesheet" />
    <link href="style.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>

Position

Positioning the Sidebar to the right or left of the main content can be achieved by using the position property. If the position is not set, the Sidebar will expand from the left to the body element.

Source
Preview
index.tsx
index.html
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { SidebarComponent } from '@syncfusion/ej2-react-navigations';
import { ButtonComponent, RadioButtonComponent, ChangeEventArgs } from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
import { SampleBase } from './sample-base';

class App extends React.Component<{}, {}> {
    public sidebarobj: SidebarComponent;
    public RadiobtnObj: RadioButtonComponent;
    private type: string = "Push";
    private target: string = 'content';
    public btnobj: ButtonComponent;
    //Toggle button click event handler
    btnClick(): void {
        let proxy: any = this;
        if (proxy.btnobj.element.classList.contains('e-active')) {
            proxy.btnobj.content = 'Close';
            proxy.btnobj.iconCss = 'e-icons burg-icon';
            this.sidebarobj.show();
        } else {
            proxy.btnobj.content = 'Open';
            proxy.btnobj.iconCss = 'e-icons burg-icon';
            this.sidebarobj.hide();
        }
    }
    // function to handle the CheckBox change event
    onChange(args: ChangeEventArgs): void {
        this.sidebarobj.position = (args.event.target.id == "left") ? "Left" : "Right";
    }
    render() {
        return (
            <div className="control-section">
                <div id="wrapper">
                    <SidebarComponent id="default-sidebar" ref={Sidebar => this.sidebarobj = Sidebar} type={this.type}  width="280px" target={this.target}>
                        <div className="title"> Sidebar content</div>
                        <div className="sub-title">
                            Click the button to close the Sidebar.
                         </div>
                        <div className="center-align">
                            <ButtonComponent onClick={this.closeClick.bind(this)} id="close" className="e-btn close-btn">Close Sidebar</ButtonComponent>
                        </div>
                    </SidebarComponent>
                    <div id="head">
                        <ButtonComponent id="toggle" ref={(scope) => { this.btnobj = scope; }} iconCss='e-icons burg-icon'
                            isToggle onClick={this.btnClick.bind(this)} className="e-btn e-info">Open</ButtonComponent>
                    </div>
                    <div id="maincontent" className="content">
                        <div>
                            <div className="title">Main content</div>
                            <div className="radiobutton" >
                                <div className='row'>
                                    <RadioButtonComponent id="left" checked={true} label='Left' name='position' change={this.onChange.bind(this)}></RadioButtonComponent>
                                </div>
                                <div className='row'>
                                    <RadioButtonComponent id="right" label='Right' name='Right' name='position' change={this.onChange.bind(this)} ></RadioButtonComponent>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
    // Toggle(Open/Close) the Sidebar
    toggleClick(): void {
        this.sidebarobj.toggle();
    }
    // Close the Sidebar
    closeClick(): void {
        this.sidebarobj.hide();
        this.btnobj.content = 'Open';
    }
}

ReactDOM.render(<App />, document.getElementById('sample'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Sidebar</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-navigations/styles/material.css" rel="stylesheet" />
    <link href="style.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
Previous
Next