diff --git a/README.md b/README.md index 850f483..8717e52 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,15 @@ -# getting-started-with-the-react-sidebar-component +# Getting Started with the React Sidebar Component + 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. + +Refer to the following documentation to learn about the React Sidebar component: +https://ej2.syncfusion.com/react/documentation/sidebar/getting-started + +Check out this online example of the React Sidebar component: +https://ej2.syncfusion.com/react/demos/#/material/sidebar/default + +## Project prerequisites +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. + +## How to run this application +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. \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..fef6893 --- /dev/null +++ b/package.json @@ -0,0 +1,46 @@ +{ + "name": "myreactapp", + "version": "0.1.0", + "private": true, + "dependencies": { + "@syncfusion/ej2-react-buttons": "^22.2.5", + "@syncfusion/ej2-react-lists": "^22.2.5", + "@syncfusion/ej2-react-navigations": "^22.2.7", + "@testing-library/jest-dom": "^5.17.0", + "@testing-library/react": "^13.4.0", + "@testing-library/user-event": "^13.5.0", + "@types/jest": "^27.5.2", + "@types/node": "^16.18.39", + "@types/react": "^18.2.18", + "@types/react-dom": "^18.2.7", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-scripts": "5.0.1", + "typescript": "^4.9.5", + "web-vitals": "^2.1.4" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test", + "eject": "react-scripts eject" + }, + "eslintConfig": { + "extends": [ + "react-app", + "react-app/jest" + ] + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] + } +} diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000..a11777c Binary files /dev/null and b/public/favicon.ico differ diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..aa069f2 --- /dev/null +++ b/public/index.html @@ -0,0 +1,43 @@ + + + + + + + + + + + + + React App + + + +
+ + + diff --git a/public/logo192.png b/public/logo192.png new file mode 100644 index 0000000..fc44b0a Binary files /dev/null and b/public/logo192.png differ diff --git a/public/logo512.png b/public/logo512.png new file mode 100644 index 0000000..a4e47a6 Binary files /dev/null and b/public/logo512.png differ diff --git a/public/manifest.json b/public/manifest.json new file mode 100644 index 0000000..080d6c7 --- /dev/null +++ b/public/manifest.json @@ -0,0 +1,25 @@ +{ + "short_name": "React App", + "name": "Create React App Sample", + "icons": [ + { + "src": "favicon.ico", + "sizes": "64x64 32x32 24x24 16x16", + "type": "image/x-icon" + }, + { + "src": "logo192.png", + "type": "image/png", + "sizes": "192x192" + }, + { + "src": "logo512.png", + "type": "image/png", + "sizes": "512x512" + } + ], + "start_url": ".", + "display": "standalone", + "theme_color": "#000000", + "background_color": "#ffffff" +} diff --git a/public/robots.txt b/public/robots.txt new file mode 100644 index 0000000..e9e57dc --- /dev/null +++ b/public/robots.txt @@ -0,0 +1,3 @@ +# https://www.robotstxt.org/robotstxt.html +User-agent: * +Disallow: diff --git a/src/App.css b/src/App.css new file mode 100644 index 0000000..7361bfa --- /dev/null +++ b/src/App.css @@ -0,0 +1,43 @@ +@import "../node_modules/@syncfusion/ej2-base/styles/material.css"; +@import "../node_modules/@syncfusion/ej2-react-navigations/styles/material.css"; +@import "../node_modules/@syncfusion/ej2-react-buttons/styles/material.css"; +@import "../node_modules/@syncfusion/ej2-react-lists/styles/material.css"; +.header { + text-align: center; + color: white; + background-color: midnightblue; + line-height: 58px; + font-size: 25px; +} + +.main-content { + font-size: 18px; + text-align: center; + padding-top: 20px; + padding-left: 30px; +} + +.sidebar-content { + font-size: 25px; + text-align: left; + /* padding-top: 50px; */ +} + +.e-sidebar{ + background-color: #f8f8f8; +} + +.e-sidebar.e-left, .e-sidebar.e-right { + top: 60px; +} +.customBtn { + color: white !important; + background-color: midnightblue !important; + border-color: midnightblue !important; + +} + +.e-btn .e-btn-icon, .e-css.e-btn .e-btn-icon{ + font-size: 20px !important; + +} diff --git a/src/App.test.tsx b/src/App.test.tsx new file mode 100644 index 0000000..2a68616 --- /dev/null +++ b/src/App.test.tsx @@ -0,0 +1,9 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import App from './App'; + +test('renders learn react link', () => { + render(); + const linkElement = screen.getByText(/learn react/i); + expect(linkElement).toBeInTheDocument(); +}); diff --git a/src/App.tsx b/src/App.tsx new file mode 100644 index 0000000..bb8451c --- /dev/null +++ b/src/App.tsx @@ -0,0 +1,68 @@ +import { SidebarComponent } from '@syncfusion/ej2-react-navigations'; +import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; +import './App.css'; +import { ListViewComponent } from '@syncfusion/ej2-react-lists'; +function App() { + const listData=[ + { id: "1", text: "JavaScript", + description: "JavaScript (JS) is an interpreted computer programming language. " + + "It was originally implemented as part of web browsers so that client-side scripts" + + "could interact with the user, control the browser, communicate asynchronously, and" + + "alter the document content that was displayed. However, it has recently" + + "become common in both game development and the creation of desktop applications." }, + { id: "2", text: "TypeScript", + description: "It is a typed superset of JavaScript that compiles to plain JavaScript." + + "TypeScript is an open-source, object-oriented programing language. It contains all elements of JavaScript" + + "It is a language designed for large-scale JavaScript application development, which can be executed on any" + + "browser, any Host, and any Operating System. TypeScript is a language as well as a set of tools." + + " TypeScript is the ES6 version of JavaScript with some additional features." }, + { id: "3", text: "Angular", + description: "Angular is a platform and framework for building single-page client applications using HTML and TypeScript." + + " Angular is written in TypeScript. It implements core and optional functionality as a set of TypeScript" + + " libraries that you import into your applications." }, + { id: "4", text: "React", + description: "React is a declarative, efficient, and flexible JavaScript library for building user interfaces." + + " It lets you compose complex UIs from small and isolated pieces of code called “components”." + + " It can also render on the server using Node." }, + { id: "5", text: "Vue", + description: "A progressive framework for building user interfaces. It is incrementally adoptable." + + " The core library is focused on the view layer only and is easy to pick up and integrate with other" + + " libraries or existing projects. On the other hand, Vue is also perfectly capable of powering" + + " sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries." } + ]; + let listFields={id:'id',text:'text'} + let sidebarObj: SidebarComponent; + const buttonClick = ()=>{ + sidebarObj.toggle(); + } + const onSelect=(args:any)=>{ + let mainContent = document.getElementsByClassName("main-content")[0]; + if(mainContent){ + mainContent.innerHTML = args.data.description; + } + } + return ( +
+
+ + Language + + Header +
+ sidebarObj = Sidebar as SidebarComponent} type='Slide' //showBackdrop={true} + > +
+ +
+ +
+ Before getting into any programming language, one should have basic knowledge about HTML, CSS, and JavaScript. These are the basic building blocks of web designing. HTML describes the structure of a web page whereas CSS describes the presentation of the web page. +
+
+ ); +} +export default App; diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..ec2585e --- /dev/null +++ b/src/index.css @@ -0,0 +1,13 @@ +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +code { + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + monospace; +} diff --git a/src/index.tsx b/src/index.tsx new file mode 100644 index 0000000..c3d887c --- /dev/null +++ b/src/index.tsx @@ -0,0 +1,21 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import App from './App'; +import reportWebVitals from './reportWebVitals'; +import {registerLicense} from '@syncfusion/ej2-base' +registerLicense("ORg4AjUWIQA/Gnt2V1hiQlRPf0BLQmFJfFBmRmlaeFRzcEU3HVdTRHRcQlVhSH5RdEVgWHhccXM="); + +const root = ReactDOM.createRoot( + document.getElementById('root') as HTMLElement +); +root.render( + + + +); + +// If you want to start measuring performance in your app, pass a function +// to log results (for example: reportWebVitals(console.log)) +// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals +reportWebVitals(); diff --git a/src/logo.svg b/src/logo.svg new file mode 100644 index 0000000..9dfc1c0 --- /dev/null +++ b/src/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts new file mode 100644 index 0000000..ece12df --- /dev/null +++ b/src/react-app-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/src/reportWebVitals.ts b/src/reportWebVitals.ts new file mode 100644 index 0000000..49a2a16 --- /dev/null +++ b/src/reportWebVitals.ts @@ -0,0 +1,15 @@ +import { ReportHandler } from 'web-vitals'; + +const reportWebVitals = (onPerfEntry?: ReportHandler) => { + if (onPerfEntry && onPerfEntry instanceof Function) { + import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { + getCLS(onPerfEntry); + getFID(onPerfEntry); + getFCP(onPerfEntry); + getLCP(onPerfEntry); + getTTFB(onPerfEntry); + }); + } +}; + +export default reportWebVitals; diff --git a/src/setupTests.ts b/src/setupTests.ts new file mode 100644 index 0000000..8f2609b --- /dev/null +++ b/src/setupTests.ts @@ -0,0 +1,5 @@ +// jest-dom adds custom jest matchers for asserting on DOM nodes. +// allows you to do things like: +// expect(element).toHaveTextContent(/react/i) +// learn more: https://github.com/testing-library/jest-dom +import '@testing-library/jest-dom'; diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..16fff78 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,26 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": [ + "dom", + "dom.iterable", + "esnext" + ], + "allowJs": true, + "skipLibCheck": true, + "esModuleInterop": true, + "allowSyntheticDefaultImports": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "noFallthroughCasesInSwitch": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx" + }, + "include": [ + "src" + ] +}