);
}
-export default App;
-{% endraw %}
\ No newline at end of file
+export default App;
\ No newline at end of file
diff --git a/ej2-react/code-snippet/sidebar/animate-cs1/app/App.tsx b/ej2-react/code-snippet/sidebar/animate-cs1/app/App.tsx
index 94c7fa0bdd..becde80781 100644
--- a/ej2-react/code-snippet/sidebar/animate-cs1/app/App.tsx
+++ b/ej2-react/code-snippet/sidebar/animate-cs1/app/App.tsx
@@ -1,4 +1,3 @@
-{% raw %}
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { SidebarComponent, SidebarType } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
@@ -41,5 +40,4 @@ function App() {
)
}
-export default App;
-{% endraw %}
\ No newline at end of file
+export default App;
\ No newline at end of file
diff --git a/ej2-react/code-snippet/sidebar/backdrop-cs1/app/App.jsx b/ej2-react/code-snippet/sidebar/backdrop-cs1/app/App.jsx
index 0ea1830992..3a48545a8d 100644
--- a/ej2-react/code-snippet/sidebar/backdrop-cs1/app/App.jsx
+++ b/ej2-react/code-snippet/sidebar/backdrop-cs1/app/App.jsx
@@ -1,4 +1,3 @@
-{% raw %}
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { SidebarComponent } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
@@ -40,5 +39,4 @@ function App() {
);
}
-export default App;
-{% endraw %}
\ No newline at end of file
+export default App;
\ No newline at end of file
diff --git a/ej2-react/code-snippet/sidebar/backdrop-cs1/app/App.tsx b/ej2-react/code-snippet/sidebar/backdrop-cs1/app/App.tsx
index 8b7816516b..73183722f0 100644
--- a/ej2-react/code-snippet/sidebar/backdrop-cs1/app/App.tsx
+++ b/ej2-react/code-snippet/sidebar/backdrop-cs1/app/App.tsx
@@ -1,4 +1,3 @@
-{% raw %}
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { SidebarComponent, SidebarType } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
@@ -43,5 +42,4 @@ function App(){
)
}
-export default App;
-{% endraw %}
\ No newline at end of file
+export default App;
\ No newline at end of file
diff --git a/ej2-react/code-snippet/sidebar/contextTo-cs1/app/App.jsx b/ej2-react/code-snippet/sidebar/contextTo-cs1/app/App.jsx
index b0a7af4fde..9db8b9926b 100644
--- a/ej2-react/code-snippet/sidebar/contextTo-cs1/app/App.jsx
+++ b/ej2-react/code-snippet/sidebar/contextTo-cs1/app/App.jsx
@@ -1,4 +1,3 @@
-{% raw %}
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { SidebarComponent } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
@@ -55,5 +54,4 @@ function App() {
);
}
-export default App;
-{% endraw %}
\ No newline at end of file
+export default App;
\ No newline at end of file
diff --git a/ej2-react/code-snippet/sidebar/contextTo-cs1/app/App.tsx b/ej2-react/code-snippet/sidebar/contextTo-cs1/app/App.tsx
index 7663df6450..1e158d01e8 100644
--- a/ej2-react/code-snippet/sidebar/contextTo-cs1/app/App.tsx
+++ b/ej2-react/code-snippet/sidebar/contextTo-cs1/app/App.tsx
@@ -1,4 +1,3 @@
-{% raw %}
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { SidebarComponent } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
@@ -60,5 +59,4 @@ function App() {
)
}
-export default App;
-{% endraw %}
\ No newline at end of file
+export default App;
\ No newline at end of file
diff --git a/ej2-react/code-snippet/sidebar/default-cs1/app/App.jsx b/ej2-react/code-snippet/sidebar/default-cs1/app/App.jsx
index 9613b212ca..a33671d871 100644
--- a/ej2-react/code-snippet/sidebar/default-cs1/app/App.jsx
+++ b/ej2-react/code-snippet/sidebar/default-cs1/app/App.jsx
@@ -1,4 +1,3 @@
-{% raw %}
import { SidebarComponent } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
@@ -20,5 +19,4 @@ function App() {
);
}
-export default App;
-{% endraw %}
\ No newline at end of file
+export default App;
\ No newline at end of file
diff --git a/ej2-react/code-snippet/sidebar/default-cs1/app/App.tsx b/ej2-react/code-snippet/sidebar/default-cs1/app/App.tsx
index bd3ad6ed25..3186cd0f16 100644
--- a/ej2-react/code-snippet/sidebar/default-cs1/app/App.tsx
+++ b/ej2-react/code-snippet/sidebar/default-cs1/app/App.tsx
@@ -1,4 +1,3 @@
-{% raw %}
import { SidebarComponent } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
@@ -22,5 +21,4 @@ function App() {
)
}
-export default App;
-{% endraw %}
\ No newline at end of file
+export default App;
\ No newline at end of file
diff --git a/ej2-react/code-snippet/sidebar/document-click-cs1/app/App.jsx b/ej2-react/code-snippet/sidebar/document-click-cs1/app/App.jsx
index 84c841ed8d..1ddb80c81d 100644
--- a/ej2-react/code-snippet/sidebar/document-click-cs1/app/App.jsx
+++ b/ej2-react/code-snippet/sidebar/document-click-cs1/app/App.jsx
@@ -1,4 +1,3 @@
-{% raw %}
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { SidebarComponent } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
@@ -28,5 +27,4 @@ function App() {
);
}
-export default App;
-{% endraw %}
\ No newline at end of file
+export default App;
\ No newline at end of file
diff --git a/ej2-react/code-snippet/sidebar/document-click-cs1/app/App.tsx b/ej2-react/code-snippet/sidebar/document-click-cs1/app/App.tsx
index 20e65edaf5..fc9790b05d 100644
--- a/ej2-react/code-snippet/sidebar/document-click-cs1/app/App.tsx
+++ b/ej2-react/code-snippet/sidebar/document-click-cs1/app/App.tsx
@@ -1,4 +1,3 @@
-{% raw %}
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { SidebarComponent, SidebarType } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
@@ -31,5 +30,4 @@ function App() {
)
}
-export default App;
-{% endraw %}
\ No newline at end of file
+export default App;
\ No newline at end of file
diff --git a/ej2-react/code-snippet/sidebar/gestures-cs1/app/App.jsx b/ej2-react/code-snippet/sidebar/gestures-cs1/app/App.jsx
index f005330268..098a6af2e5 100644
--- a/ej2-react/code-snippet/sidebar/gestures-cs1/app/App.jsx
+++ b/ej2-react/code-snippet/sidebar/gestures-cs1/app/App.jsx
@@ -1,4 +1,3 @@
-{% raw %}
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { SidebarComponent } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
@@ -39,5 +38,4 @@ function App() {
);
}
-export default App;
-{% endraw %}
\ No newline at end of file
+export default App;
\ No newline at end of file
diff --git a/ej2-react/code-snippet/sidebar/gestures-cs1/app/App.tsx b/ej2-react/code-snippet/sidebar/gestures-cs1/app/App.tsx
index f3f6e5d6c4..ab5057e6f4 100644
--- a/ej2-react/code-snippet/sidebar/gestures-cs1/app/App.tsx
+++ b/ej2-react/code-snippet/sidebar/gestures-cs1/app/App.tsx
@@ -1,4 +1,3 @@
-{% raw %}
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { SidebarComponent, SidebarType } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
@@ -41,5 +40,4 @@ function App() {
)
}
-export default App;
-{% endraw %}
\ No newline at end of file
+export default App;
\ No newline at end of file
diff --git a/ej2-react/code-snippet/sidebar/listview-cs1/app/App.jsx b/ej2-react/code-snippet/sidebar/listview-cs1/app/App.jsx
index df8e154650..26502301f5 100644
--- a/ej2-react/code-snippet/sidebar/listview-cs1/app/App.jsx
+++ b/ej2-react/code-snippet/sidebar/listview-cs1/app/App.jsx
@@ -1,4 +1,3 @@
-{% raw %}
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
import { SidebarComponent } from '@syncfusion/ej2-react-navigations';
@@ -49,5 +48,4 @@ function App() {
);
}
-export default App;
-{% endraw %}
\ No newline at end of file
+export default App;
\ No newline at end of file
diff --git a/ej2-react/code-snippet/sidebar/listview-cs1/app/App.tsx b/ej2-react/code-snippet/sidebar/listview-cs1/app/App.tsx
index 29f4d2e092..8355dfd508 100644
--- a/ej2-react/code-snippet/sidebar/listview-cs1/app/App.tsx
+++ b/ej2-react/code-snippet/sidebar/listview-cs1/app/App.tsx
@@ -1,4 +1,3 @@
-{% raw %}
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
import { SidebarComponent, SidebarType } from '@syncfusion/ej2-react-navigations';
@@ -52,5 +51,4 @@ function App() {
)
}
-export default App;
-{% endraw %}
\ No newline at end of file
+export default App;
\ No newline at end of file
diff --git a/ej2-react/code-snippet/sidebar/types-cs1/app/App.jsx b/ej2-react/code-snippet/sidebar/types-cs1/app/App.jsx
index aa8a69a402..b0c7cb0a89 100644
--- a/ej2-react/code-snippet/sidebar/types-cs1/app/App.jsx
+++ b/ej2-react/code-snippet/sidebar/types-cs1/app/App.jsx
@@ -1,4 +1,3 @@
-{% raw %}
import { ButtonComponent, RadioButtonComponent } from '@syncfusion/ej2-react-buttons';
import { SidebarComponent } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
@@ -65,5 +64,4 @@ function App() {
);
}
-export default App;
-{% endraw %}
\ No newline at end of file
+export default App;
\ No newline at end of file
diff --git a/ej2-react/code-snippet/sidebar/types-cs1/app/App.tsx b/ej2-react/code-snippet/sidebar/types-cs1/app/App.tsx
index d3349d71fe..88597ffbaf 100644
--- a/ej2-react/code-snippet/sidebar/types-cs1/app/App.tsx
+++ b/ej2-react/code-snippet/sidebar/types-cs1/app/App.tsx
@@ -1,4 +1,3 @@
-{% raw %}
import { ButtonComponent, ChangeEventArgs, RadioButtonComponent } from '@syncfusion/ej2-react-buttons';
import { SidebarComponent, SidebarType } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
@@ -68,5 +67,4 @@ function App() {
)
}
-export default App;
-{% endraw %}
\ No newline at end of file
+export default App;
\ No newline at end of file
diff --git a/ej2-react/code-snippet/splitter/getting-started-cs6/app/App.jsx b/ej2-react/code-snippet/splitter/getting-started-cs6/app/App.jsx
index 383906c787..dd6e0968c2 100644
--- a/ej2-react/code-snippet/splitter/getting-started-cs6/app/App.jsx
+++ b/ej2-react/code-snippet/splitter/getting-started-cs6/app/App.jsx
@@ -47,8 +47,7 @@ class App extends React.Component {
// Code block for click action
{closeBrace})
-
- );
+ );
}
render() {
return (
diff --git a/ej2-react/code-snippet/stepper/getting-started-cs1/app/index.jsx b/ej2-react/code-snippet/stepper/getting-started-cs1/app/index.jsx
index 16ebd6e8c4..209340d150 100644
--- a/ej2-react/code-snippet/stepper/getting-started-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/stepper/getting-started-cs1/app/index.jsx
@@ -1,5 +1,3 @@
-{% raw %}
-
import * as React from "react";
import * as ReactDom from "react-dom";
import { StepperComponent, StepsDirective, StepDirective } from '@syncfusion/ej2-react-navigations';
@@ -20,6 +18,4 @@ function App() {
);
}
export default App;
-ReactDom.render(, document.getElementById("element"));
-
-{% endraw %}
+ReactDom.render(, document.getElementById("element"));
\ No newline at end of file
diff --git a/ej2-react/code-snippet/stepper/getting-started-cs1/app/index.tsx b/ej2-react/code-snippet/stepper/getting-started-cs1/app/index.tsx
index 16ebd6e8c4..209340d150 100644
--- a/ej2-react/code-snippet/stepper/getting-started-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/stepper/getting-started-cs1/app/index.tsx
@@ -1,5 +1,3 @@
-{% raw %}
-
import * as React from "react";
import * as ReactDom from "react-dom";
import { StepperComponent, StepsDirective, StepDirective } from '@syncfusion/ej2-react-navigations';
@@ -20,6 +18,4 @@ function App() {
);
}
export default App;
-ReactDom.render(, document.getElementById("element"));
-
-{% endraw %}
+ReactDom.render(, document.getElementById("element"));
\ No newline at end of file
diff --git a/ej2-react/code-snippet/stepper/icon-with-label/app/index.jsx b/ej2-react/code-snippet/stepper/icon-with-label/app/index.jsx
index bf2708b36b..1056f68583 100644
--- a/ej2-react/code-snippet/stepper/icon-with-label/app/index.jsx
+++ b/ej2-react/code-snippet/stepper/icon-with-label/app/index.jsx
@@ -1,5 +1,3 @@
-{% raw %}
-
import * as React from "react";
import * as ReactDom from "react-dom";
import { StepperComponent, StepsDirective, StepDirective } from '@syncfusion/ej2-react-navigations';
@@ -21,5 +19,3 @@ function App() {
}
export default App;
ReactDom.render(, document.getElementById("element"));
-
-{% endraw %}
diff --git a/ej2-react/code-snippet/stepper/icon-with-label/app/index.tsx b/ej2-react/code-snippet/stepper/icon-with-label/app/index.tsx
index bf2708b36b..21d4dd1ab6 100644
--- a/ej2-react/code-snippet/stepper/icon-with-label/app/index.tsx
+++ b/ej2-react/code-snippet/stepper/icon-with-label/app/index.tsx
@@ -1,5 +1,3 @@
-{% raw %}
-
import * as React from "react";
import * as ReactDom from "react-dom";
import { StepperComponent, StepsDirective, StepDirective } from '@syncfusion/ej2-react-navigations';
@@ -20,6 +18,4 @@ function App() {
);
}
export default App;
-ReactDom.render(, document.getElementById("element"));
-
-{% endraw %}
+ReactDom.render(, document.getElementById("element"));
\ No newline at end of file
diff --git a/ej2-react/code-snippet/switch/getting-started-cs1/index.html b/ej2-react/code-snippet/switch/getting-started-cs1/index.html
index 6d023b71d1..c25937bf70 100644
--- a/ej2-react/code-snippet/switch/getting-started-cs1/index.html
+++ b/ej2-react/code-snippet/switch/getting-started-cs1/index.html
@@ -7,7 +7,7 @@
-
+
diff --git a/ej2-react/code-snippet/textbox/default-cs1/systemjs.config.js b/ej2-react/code-snippet/textbox/default-cs1/systemjs.config.js
index a4f825392d..4c5db1da84 100644
--- a/ej2-react/code-snippet/textbox/default-cs1/systemjs.config.js
+++ b/ej2-react/code-snippet/textbox/default-cs1/systemjs.config.js
@@ -28,8 +28,8 @@ System.config({
"@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
"@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js",
"@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
-"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
-"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+ "react-dom":"https://unpkg.com/react-dom@18.1.0/umd/react-dom.development.js",
+ "react":"https://unpkg.com/react@18.1.0/umd/react.development.js",
},
packages: {
diff --git a/ej2-react/code-snippet/timepicker/default-cs1/index.html b/ej2-react/code-snippet/timepicker/default-cs1/index.html
index 9479ef7875..1674370439 100644
--- a/ej2-react/code-snippet/timepicker/default-cs1/index.html
+++ b/ej2-react/code-snippet/timepicker/default-cs1/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/timepicker/default-cs10/index.html b/ej2-react/code-snippet/timepicker/default-cs10/index.html
index 9479ef7875..1674370439 100644
--- a/ej2-react/code-snippet/timepicker/default-cs10/index.html
+++ b/ej2-react/code-snippet/timepicker/default-cs10/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/timepicker/default-cs11/index.html b/ej2-react/code-snippet/timepicker/default-cs11/index.html
index 9479ef7875..1674370439 100644
--- a/ej2-react/code-snippet/timepicker/default-cs11/index.html
+++ b/ej2-react/code-snippet/timepicker/default-cs11/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/timepicker/default-cs12/index.html b/ej2-react/code-snippet/timepicker/default-cs12/index.html
index 9479ef7875..1674370439 100644
--- a/ej2-react/code-snippet/timepicker/default-cs12/index.html
+++ b/ej2-react/code-snippet/timepicker/default-cs12/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/timepicker/default-cs2/index.html b/ej2-react/code-snippet/timepicker/default-cs2/index.html
index 9479ef7875..1674370439 100644
--- a/ej2-react/code-snippet/timepicker/default-cs2/index.html
+++ b/ej2-react/code-snippet/timepicker/default-cs2/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/timepicker/default-cs3/index.html b/ej2-react/code-snippet/timepicker/default-cs3/index.html
index 9479ef7875..1674370439 100644
--- a/ej2-react/code-snippet/timepicker/default-cs3/index.html
+++ b/ej2-react/code-snippet/timepicker/default-cs3/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/timepicker/default-cs4/index.html b/ej2-react/code-snippet/timepicker/default-cs4/index.html
index 9479ef7875..1674370439 100644
--- a/ej2-react/code-snippet/timepicker/default-cs4/index.html
+++ b/ej2-react/code-snippet/timepicker/default-cs4/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/timepicker/default-cs5/index.html b/ej2-react/code-snippet/timepicker/default-cs5/index.html
index 9479ef7875..1674370439 100644
--- a/ej2-react/code-snippet/timepicker/default-cs5/index.html
+++ b/ej2-react/code-snippet/timepicker/default-cs5/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/timepicker/default-cs6/index.html b/ej2-react/code-snippet/timepicker/default-cs6/index.html
index 9479ef7875..1674370439 100644
--- a/ej2-react/code-snippet/timepicker/default-cs6/index.html
+++ b/ej2-react/code-snippet/timepicker/default-cs6/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/timepicker/default-cs7/index.html b/ej2-react/code-snippet/timepicker/default-cs7/index.html
index 9479ef7875..1674370439 100644
--- a/ej2-react/code-snippet/timepicker/default-cs7/index.html
+++ b/ej2-react/code-snippet/timepicker/default-cs7/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/timepicker/default-cs8/index.html b/ej2-react/code-snippet/timepicker/default-cs8/index.html
index 9479ef7875..1674370439 100644
--- a/ej2-react/code-snippet/timepicker/default-cs8/index.html
+++ b/ej2-react/code-snippet/timepicker/default-cs8/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/timepicker/default-cs9/index.html b/ej2-react/code-snippet/timepicker/default-cs9/index.html
index 9479ef7875..1674370439 100644
--- a/ej2-react/code-snippet/timepicker/default-cs9/index.html
+++ b/ej2-react/code-snippet/timepicker/default-cs9/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/timepicker/how-to-cs1/index.html b/ej2-react/code-snippet/timepicker/how-to-cs1/index.html
index 9479ef7875..1674370439 100644
--- a/ej2-react/code-snippet/timepicker/how-to-cs1/index.html
+++ b/ej2-react/code-snippet/timepicker/how-to-cs1/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/timepicker/internationalization-cs1/index.html b/ej2-react/code-snippet/timepicker/internationalization-cs1/index.html
index 9479ef7875..1674370439 100644
--- a/ej2-react/code-snippet/timepicker/internationalization-cs1/index.html
+++ b/ej2-react/code-snippet/timepicker/internationalization-cs1/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/timepicker/internationalization-cs2/index.html b/ej2-react/code-snippet/timepicker/internationalization-cs2/index.html
index 9479ef7875..1674370439 100644
--- a/ej2-react/code-snippet/timepicker/internationalization-cs2/index.html
+++ b/ej2-react/code-snippet/timepicker/internationalization-cs2/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/timepicker/keyboard-cs1/index.html b/ej2-react/code-snippet/timepicker/keyboard-cs1/index.html
index 9479ef7875..1674370439 100644
--- a/ej2-react/code-snippet/timepicker/keyboard-cs1/index.html
+++ b/ej2-react/code-snippet/timepicker/keyboard-cs1/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/timepicker/keyboard-cs2/index.html b/ej2-react/code-snippet/timepicker/keyboard-cs2/index.html
index 9479ef7875..1674370439 100644
--- a/ej2-react/code-snippet/timepicker/keyboard-cs2/index.html
+++ b/ej2-react/code-snippet/timepicker/keyboard-cs2/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/timepicker/mask-module-cs1/index.html b/ej2-react/code-snippet/timepicker/mask-module-cs1/index.html
index d3e1fb2fbe..ef9ccc811a 100644
--- a/ej2-react/code-snippet/timepicker/mask-module-cs1/index.html
+++ b/ej2-react/code-snippet/timepicker/mask-module-cs1/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/timepicker/mask-module-cs2/index.html b/ej2-react/code-snippet/timepicker/mask-module-cs2/index.html
index d3e1fb2fbe..ef9ccc811a 100644
--- a/ej2-react/code-snippet/timepicker/mask-module-cs2/index.html
+++ b/ej2-react/code-snippet/timepicker/mask-module-cs2/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/timepicker/mask-module-cs3/index.html b/ej2-react/code-snippet/timepicker/mask-module-cs3/index.html
index d3e1fb2fbe..ef9ccc811a 100644
--- a/ej2-react/code-snippet/timepicker/mask-module-cs3/index.html
+++ b/ej2-react/code-snippet/timepicker/mask-module-cs3/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/timepicker/mask-module-cs4/index.html b/ej2-react/code-snippet/timepicker/mask-module-cs4/index.html
index d3e1fb2fbe..ef9ccc811a 100644
--- a/ej2-react/code-snippet/timepicker/mask-module-cs4/index.html
+++ b/ej2-react/code-snippet/timepicker/mask-module-cs4/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/timepicker/mask-module-cs5/index.html b/ej2-react/code-snippet/timepicker/mask-module-cs5/index.html
index d3e1fb2fbe..ef9ccc811a 100644
--- a/ej2-react/code-snippet/timepicker/mask-module-cs5/index.html
+++ b/ej2-react/code-snippet/timepicker/mask-module-cs5/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/timepicker/mask-module-cs6/index.html b/ej2-react/code-snippet/timepicker/mask-module-cs6/index.html
index d3e1fb2fbe..ef9ccc811a 100644
--- a/ej2-react/code-snippet/timepicker/mask-module-cs6/index.html
+++ b/ej2-react/code-snippet/timepicker/mask-module-cs6/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/timepicker/rtl-cs1/index.html b/ej2-react/code-snippet/timepicker/rtl-cs1/index.html
index 384e9c89a6..450b1dab74 100644
--- a/ej2-react/code-snippet/timepicker/rtl-cs1/index.html
+++ b/ej2-react/code-snippet/timepicker/rtl-cs1/index.html
@@ -8,11 +8,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/timepicker/rtl-cs2/index.html b/ej2-react/code-snippet/timepicker/rtl-cs2/index.html
index 384e9c89a6..450b1dab74 100644
--- a/ej2-react/code-snippet/timepicker/rtl-cs2/index.html
+++ b/ej2-react/code-snippet/timepicker/rtl-cs2/index.html
@@ -8,11 +8,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/timepicker/validation-cs1/index.html b/ej2-react/code-snippet/timepicker/validation-cs1/index.html
index 9253f86dcf..c397e4a691 100644
--- a/ej2-react/code-snippet/timepicker/validation-cs1/index.html
+++ b/ej2-react/code-snippet/timepicker/validation-cs1/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/context-menu/getting-started.md b/ej2-react/context-menu/getting-started.md
index bc624bebaf..bb180e61bf 100644
--- a/ej2-react/context-menu/getting-started.md
+++ b/ej2-react/context-menu/getting-started.md
@@ -97,6 +97,7 @@ Add ContextMenu component's styles as given below in `App.css`.
Create the `ContextMenu` component in the application. Add the ContextMenu component to the `src/App.tsx` file. The component uses items for `menu` options and a `target` property to specify where the ContextMenu will open.
+**App.tsx**
```ts
@@ -126,6 +127,7 @@ function App() {
}
export default App;
```
+**App.jsx**
```ts
import { ContextMenuComponent } from '@syncfusion/ej2-react-navigations';
diff --git a/ej2-react/dashboard-layout/getting-started.md b/ej2-react/dashboard-layout/getting-started.md
index af377a0229..5e766abb5a 100644
--- a/ej2-react/dashboard-layout/getting-started.md
+++ b/ej2-react/dashboard-layout/getting-started.md
@@ -152,7 +152,7 @@ function App() {
export default App;
```
-
+`[src/App.jsx]`
```ts
// import the DashboardLayout component
import { DashboardLayoutComponent } from '@syncfusion/ej2-react-layouts';
@@ -284,6 +284,7 @@ function App() {
export default App;
```
+`[src/App.jsx]`
```ts
// import the DashboardLayout component
diff --git a/ej2-react/drop-down-list/preact.md b/ej2-react/drop-down-list/preact.md
index a2d3c011f7..d500054ed6 100644
--- a/ej2-react/drop-down-list/preact.md
+++ b/ej2-react/drop-down-list/preact.md
@@ -114,6 +114,7 @@ In this article, the `Material 3` theme is applied using CSS styles, which are a
{% endtabs %}
> The order of importing CSS styles should be in line with its dependency graph.
+
## Add the Syncfusion® React component
Follow the steps below to add the React DropDownList component to the Preact project:
diff --git a/ej2-react/drop-down-tree/getting-started.md b/ej2-react/drop-down-tree/getting-started.md
index d249bce7e6..a8de58bf19 100644
--- a/ej2-react/drop-down-tree/getting-started.md
+++ b/ej2-react/drop-down-tree/getting-started.md
@@ -86,19 +86,6 @@ ReactDOM.render(, document.getElementById('sample'));
```
-```ts
-import { DropDownTreeComponent } from '@syncfusion/ej2-react-dropdowns';
-import * as React from 'react';
-import * as ReactDOM from "react-dom";
-function App() {
- return (
- // specifies the tag for render the DropDownTree component
- );
-}
-export default App;
-ReactDOM.render(, document.getElementById('sample'));
-```
-
## Adding CSS reference
Import the Dropdown Tree component required CSS references as follows in `src/App.css`.
@@ -119,7 +106,7 @@ Import the Dropdown Tree component required CSS references as follows in `src/Ap
The Dropdown Tree component can load the data either from local data sources or remote data services. This can be done using the [`dataSource`](https://helpej2.syncfusion.com/react/documentation/api/drop-down-tree/fieldsModel#datasource) property that is a member of the [`fields`](https://helpej2.syncfusion.com/react/documentation/api/drop-down-tree#fields) property. The dataSource property supports array of JavaScript objects and DataManager. Here, an array of JSON values is passed to the Dropdown Tree component.
-
+**App.tsx**
```ts
@@ -164,6 +151,7 @@ export default App;
ReactDOM.render(, document.getElementById('sample'));
```
+**App.jsx**
```ts
import { DropDownTreeComponent } from '@syncfusion/ej2-react-dropdowns';
diff --git a/ej2-react/listview/getting-started.md b/ej2-react/listview/getting-started.md
index ff5db680b4..1c888f3433 100644
--- a/ej2-react/listview/getting-started.md
+++ b/ej2-react/listview/getting-started.md
@@ -82,18 +82,6 @@ function App() {
export default App;
```
-```ts
-import * as React from 'react';
-import { ListViewComponent } from '@syncfusion/ej2-react-lists';
-import './App.css';
-function App() {
- return (
- //specifies the tag to render the ListView component
- );
-}
-export default App;
-```
-
## Adding CSS Reference
Import `ListView` component required theme references at the top of `src/App.css`.
@@ -114,7 +102,7 @@ If the `CheckList` behavior is used in the ListView, include the Button componen
Populate the data in ListView using [`dataSource`](https://helpej2.syncfusion.com/react/documentation/api/list-view#datasource) property. Here, an array of JSON values passed to `ListView` component.
-
+**App.tsx**
```ts
import * as React from 'react';
@@ -138,6 +126,7 @@ function App() {
export default App;
```
+**App.jsx**
```ts
import * as React from 'react';
diff --git a/ej2-react/mention/getting-started.md b/ej2-react/mention/getting-started.md
index bed8076445..438cf2eebf 100644
--- a/ej2-react/mention/getting-started.md
+++ b/ej2-react/mention/getting-started.md
@@ -256,9 +256,9 @@ The output appears as follows.
## Display Mention character
-By using the [showMentionChar](https://ej2.syncfusion.com/react/documentation/api/mention/index-default#showMentionChar) property, the text content can be displayed along with the mention character. You can customize the mention character by using the [mentionChar](https://ej2.syncfusion.com/react/documentation/api/mention/index-default#mentionChar) property in the Mention component.
+By using the [showMentionChar](https://ej2.syncfusion.com/react/documentation/api/mention/index-default#showmentionchar) property, the text content can be displayed along with the mention character. You can customize the mention character by using the [mentionChar](https://ej2.syncfusion.com/react/documentation/api/mention/index-default#mentionchar) property in the Mention component.
-> By default, the [mentionChar](https://ej2.syncfusion.com/react/documentation/api/mention/index-default#mentionChar) is `@` and the [showMentionChar](https://ej2.syncfusion.com/react/documentation/api/mention/index-default#showMentionChar) property is disabled.
+> By default, the [mentionChar](https://ej2.syncfusion.com/react/documentation/api/mention/index-default#mentionchar) is `@` and the [showMentionChar](https://ej2.syncfusion.com/react/documentation/api/mention/index-default#showmentionchar) property is disabled.
The following example displays the text content along with the mention character configured as `#`.
diff --git a/ej2-react/menu/getting-started.md b/ej2-react/menu/getting-started.md
index 22ef3b3f43..84edf35b33 100644
--- a/ej2-react/menu/getting-started.md
+++ b/ej2-react/menu/getting-started.md
@@ -20,49 +20,67 @@ The following list of dependencies are required to use the Menu component in an
|-- @syncfusion/ej2-react-navigations
| |-- @syncfusion/ej2-react-base
| |-- @syncfusion/ej2-navigations
-| | `-- @syncfusion/ej2-base
+| | -- @syncfusion/ej2-base
+```
-Setup a development environment
-To easily set up a React application, use create-vite-app, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like create-react-app. For detailed steps, refer to the Vite installation instructions. Vite sets up the environment using JavaScript and optimizes applications for production.
+## Setup for local development
-Note: To create a React application using create-react-app, refer to this documentation for more details.
+Easily set up a React application using `create-vite-app`, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like `create-react-app`. For detailed steps, refer to the Vite [installation instructions](https://vitejs.dev/guide). Vite sets up your environment using JavaScript and optimizes your application for production.
+
+> **Note:** To create a React application using `create-react-app`, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/create-app) for more details.
To create a new React application, run the following command.
+```bash
npm create vite@latest my-app
+```
+This command will prompt you for a few settings for the new project, such as selecting a framework and a variant.
+
+
-To set up a React application in a TypeScript environment, run the following command.
+To set up a React application in TypeScript environment, run the following command.
+```bash
npm create vite@latest my-app -- --template react-ts
cd my-app
npm run dev
+```
+To set up a React application in JavaScript environment, run the following command.
-To set up a React application in a JavaScript environment, run the following command.
-
+```bash
npm create vite@latest my-app -- --template react
cd my-app
npm run dev
+```
+
+## Adding Syncfusion® packages
-Adding Syncfusion® packages
-All available Essential® JS 2 packages are published in the npmjs.com public registry.
+All the available Essential® JS 2 packages are published in the [`npmjs.com`](https://www.npmjs.com/~syncfusionorg) public registry.
To install the Menu component, use the following command:
+```bash
npm install @syncfusion/ej2-react-navigations --save
+```
This command installs the necessary packages and their dependencies, which are required to render the component in a React environment.
-Adding Stylesheets to the Application
+## Adding Stylesheets to the Application
+
Add the Menu component's styles as shown below in App.css.
+```css
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
+```
+
+## Add Menu to the project
-Add Menu to the project
Create the Menu component in the application. Add the Menu component to the src/App.tsx file using the following code snippet. The items property defines the structure of the menu.
+```ts
import { MenuComponent, MenuItemModel } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';
@@ -107,12 +125,14 @@ function App() {
);
}
export default App;
+```
-Run the application
-Run the npm run dev command in the console to start the development server. This command compiles code and serves the application locally, opening it in the browser.
+## Run the application
+Run the `npm run dev` command in the terminal to start the development server. This command compiles your code and serves the application locally, opening it in the browser.
+
+```bash
npm run dev
+```
{% previewsample "page.domainurl/code-snippet/menu/default-cs1" %}
-
-Integrating with Toolbar component
diff --git a/ej2-react/sidebar/getting-started.md b/ej2-react/sidebar/getting-started.md
index 8737d3bdba..d1973cebcf 100644
--- a/ej2-react/sidebar/getting-started.md
+++ b/ej2-react/sidebar/getting-started.md
@@ -88,32 +88,6 @@ Sidebar can be initialized using the `` tag, it's used to rend
**src/App.tsx**
-
-```ts
-
-import { SidebarComponent } from '@syncfusion/ej2-react-navigations';
-import * as React from 'react';
-
-function App() {
-
- return (
-
-
-
-
Sidebar content
-
-
-
Main content
-
content goes here
-
-
-
- )
-}
-export default App;
-
-```
-
```ts
import { SidebarComponent } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
diff --git a/ej2-react/treeview/getting-started.md b/ej2-react/treeview/getting-started.md
index ad128c1d26..fbc913b574 100644
--- a/ej2-react/treeview/getting-started.md
+++ b/ej2-react/treeview/getting-started.md
@@ -92,20 +92,6 @@ ReactDOM.render(, document.getElementById('root'));
```
-```ts
-import * as React from 'react';
-import './App.css';
-import * as ReactDOM from "react-dom";
-import { TreeViewComponent } from '@syncfusion/ej2-react-navigations';
-function App() {
- return (
- // specifies the tag to render the TreeView component
- );
-}
-export default App;
-ReactDOM.render(, document.getElementById('root'));
-```
-
## Adding CSS reference
Import the TreeView component required CSS references as follows in **src/App.css**.
@@ -127,7 +113,7 @@ Import the TreeView component required CSS references as follows in **src/App.cs
TreeView can load data either from local data sources or remote data services. This can be done using the [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/treeview/fieldsSettingsModel#datasource) property that is a member of the [fields](https://ej2.syncfusion.com/react/documentation/api/treeview#fields) property. The dataSource property supports array of JavaScript objects and [`DataManager`](https://ej2.syncfusion.com/react/documentation/data/getting-started). Here, an array of JSON values is passed to the TreeView component.
-
+**App.tsx**
```ts
import * as React from 'react';
@@ -238,7 +224,7 @@ export default App;
ReactDOM.render(, document.getElementById('root'));
```
-
+**App.jsx**
```ts
import * as React from 'react';
import './App.css';
diff --git a/ej2-react/uploader/preact.md b/ej2-react/uploader/preact.md
index fd4133b7e7..07cf6fab10 100644
--- a/ej2-react/uploader/preact.md
+++ b/ej2-react/uploader/preact.md
@@ -114,6 +114,7 @@ In this article, the `Material 3` theme is applied using CSS styles, which are a
{% endtabs %}
> The order of importing CSS styles should be in line with its dependency graph.
+
## Add the Syncfusion® React component
Follow these steps to add the React Uploader component to the Preact project: