Skip to content

Commit b3c5a12

Browse files
Merge pull request #2 from abinayabalakrishnan-syncfusion/ReadmeUpdate
Documentation update for README
2 parents 8d5cb94 + 7500d8e commit b3c5a12

1 file changed

Lines changed: 46 additions & 9 deletions

File tree

README.md

Lines changed: 46 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,52 @@
11
# Getting Started with the React Sidebar Component
22

3-
A quick start project that shows how to create and configure the Syncfusion React Sidebar component in a React project. This project also includes a code snippet to open and close the sidebar manually, how to change the sidebar position and finally how to integrate the List View component into Sidebar.
4-
5-
Refer to the following documentation to learn about the React Sidebar component:
6-
https://ej2.syncfusion.com/react/documentation/sidebar/getting-started
3+
**Repository Description**
4+
This repository contains a quick‑start React sample that demonstrates how to create and configure the Syncfusion React Sidebar component in a React application.
5+
6+
A quick start project that shows how to create and configure the Syncfusion React Sidebar component in a React project. This project also includes example code to open and close the Sidebar manually, change the Sidebar position, and integrate the ListView component inside the Sidebar.
7+
8+
## Project Overview
9+
The purpose of this project is to help developers understand the basic usage and configuration of the Syncfusion React Sidebar component. It demonstrates common Sidebar scenarios such as toggling visibility, positioning, and integrating additional UI components for navigation.
10+
11+
## Features
12+
- Integration of the Syncfusion React Sidebar component
13+
- Open and close the Sidebar programmatically
14+
- Change Sidebar position (left or right)
15+
- Embed the ListView component inside the Sidebar
16+
- Build structured navigation layouts
717

8-
Check out this online example of the React Sidebar component:
18+
## Examples
19+
- Online demo:<br>
920
https://ej2.syncfusion.com/react/demos/#/material/sidebar/default
1021

11-
## Project prerequisites
12-
Make sure that you have the compatible versions of [Visual Studio Code](https://code.visualstudio.com/download ) and [NodeJS](https://nodejs.org/en/download) or later version in your machine before starting to work on this project.
22+
## Prerequisites
23+
Make sure that you have the following installed before starting this project:
24+
- [NodeJS](https://nodejs.org/en/download) (latest version recommended)
25+
- [Visual Studio Code](https://code.visualstudio.com/download)
26+
27+
## Installation and Running the Application
28+
1. Clone the repository.
29+
```bash
30+
git clone https://github.com/SyncfusionExamples/getting-started-with-the-react-sidebar-component.git
31+
```
32+
2. Open the project directory in Visual Studio Code.
33+
3. Install the required dependencies using:`npm install`.
34+
4. Run the application using:`npm start`.
35+
5. Open your browser and navigate to the URL shown in the terminal (typically `http://localhost:3000`).
36+
37+
## Documentation
38+
- General Syncfusion documentation:<br>
39+
https://help.syncfusion.com/
40+
- React Introduction:<br>
41+
https://ej2.syncfusion.com/react/documentation/introduction
42+
- React Sidebar Getting Started:<br>
43+
https://ej2.syncfusion.com/react/documentation/sidebar/getting-started
44+
45+
## Troubleshooting
46+
- Ensure NodeJS and npm are installed correctly.
47+
- Run npm install again if dependency installation fails.
48+
- Restart the development server if Sidebar changes are not reflected.
49+
- Check the browser console for runtime or rendering errors.
1350

14-
## How to run this application
15-
To run this application, you need to first clone the `getting-started-with-the-react-sidebar-component` repository and then open it in Visual Studio Code. Now, simply build and run your project to view the output.
51+
## Support
52+
For detailed API references, advanced configuration options, and additional examples, refer to the Syncfusion React documentation links provided above.

0 commit comments

Comments
 (0)