Skip to content

Commit 4d8786a

Browse files
PiramanayagamSyncfusionPiramanayagamSyncfusion
authored
Merge pull request #34 from Deepika5698/master
Updated react samples
2 parents 0aece82 + ad50690 commit 4d8786a

File tree

3 files changed

+292
-657
lines changed

3 files changed

+292
-657
lines changed

‎README.md

Lines changed: 12 additions & 204 deletions
Original file line numberDiff line numberDiff line change
@@ -1,217 +1,25 @@
1-
# React Sample Configuration
1+
# Syncfusion React Component Demo Samples
22

3-
## Adding your sample folder
4-
Create new folder in 'src' location and name the folder as control name for example "grid” it is control name.
3+
Welcome to the demo samples repository for Syncfusion React components! This repository contains a collection of sample applications showcasing the usage of various Syncfusion components in a React environment.
54

6-
_Note: Do not use whitespace at any cause in folder’s name. Use “-” instead of space._
5+
## Prerequisites
76

8-
## Adding the sample
7+
- [Node.js](https://nodejs.org/en) - `v16+`
98

10-
Add the sample component tsx file in the sample folder.Below steps are need to be considered on sample creation
9+
## Run the samples
1110

12-
* Sample component must extend the "SampleBase" component class from the path "src/common/sample-base" file.
13-
* Sample tag must be enclosed between the "control-section" div.
14-
* In all samples description is need to be added. Add sample description within the div tag with id as **description**.
11+
To run the sample applications locally, follow these steps
1512

16-
```javascript
17-
import * as ReactDOM from 'react-dom';
18-
import * as React from 'react';
19-
import { SampleBase } from '../common/sample-base';
20-
export class Default extends SampleBase<{}, {}> {
21-
22-
render() {
23-
return (
24-
<div className = 'control-pane'>
25-
<div className='control-section'>
26-
//sample component tags
27-
</div>
28-
<div id="description">
29-
// sample description
30-
</div>
31-
</div>
32-
)
33-
}
34-
}
13+
1. Install the required dependencies using npm
3514

36-
```
37-
Refer the [sample](https://github.com/syncfusion/ej2-react-samples/blob/master/src/grid/default.tsx) for example sample component.
38-
39-
Note: Do not use whitespace at any cause in file’s name. Use “-” instead of space.
40-
41-
## Adding property section
42-
To add the "propertypane” in the sample use tag `PropertyPane` from "common/property-pane" .Configure your sample properties as like below code snippet.
43-
44-
```
45-
<PropertyPane title='Properties'>
46-
<table id="property" title="Properties" className='property-panel-table' style={{ width: '100%' }}>
47-
<tr>
48-
<td style={{ width: '30%' }}>
49-
<div className="col-md-4" style={{ paddingTop: "8px" }}>
50-
GridLines
51-
</div>
52-
</td>
53-
<td style={{ width: '70%', paddingRight: '10px' }}>
54-
<div>
55-
<select id="ddl" name="ddl" onChange={this.change.bind(this)} className="form-control" style={{ padding: "6px" }} ref={d => this.dropElement = d}>
56-
<option value="default">Default</option>
57-
<option value="both">Both</option>
58-
<option value="none">None</option>
59-
<option value="horizontal">Horizontal</option>
60-
<option value="vertical">Vertical</option>
61-
</select>
62-
</div>
63-
</td>
64-
</tr>
65-
</table>
66-
</PropertyPane>
67-
68-
```
69-
Refer the [PropertyPanesample](https://github.com/syncfusion/ej2-react-samples/blob/master/src/grid/adaptive.tsx) for propertyPane example.
70-
71-
## Add Routing for your sample
72-
73-
Create the "config.tsx” file inside of your control folder.Configure your "config.tsx file" file as like below code snippet.
74-
75-
```
76-
export const GridSampleOrder:Object = [
77-
{ 'path': 'grid/default', 'component':'Default', 'name': 'Default Functionalities', 'order': '01', 'category': 'Grid' },
78-
{ 'path': 'grid/gridlines', 'component':'GridLines', 'name': 'GridLines', 'order': '01', 'category': 'Grid', hideOnDevice: true }
79-
]
80-
81-
```
82-
83-
**Fields Description:**
84-
85-
* _path :_ Specifies the sample router path. Path must be same as "sampleFolderName/sampleFileName".
86-
87-
* _component :_ Specifies the name of the sample component.
88-
89-
* _name :_ Specifies the sample name to be displayed.
90-
91-
* _order :_ Specifies the order in which sample to be displayed.
92-
93-
* _category :_ Specifies the sample category.
94-
95-
*Note: set **hideOnDevice** as true if you want to hide a sample in devices.*
96-
97-
## Configure Sample List
98-
99-
Add your samples in “samplelist.tsx” located in “/src/common” folder
100-
1. Import your sampleOrder array from the component config file.
101-
2. Add your samples in samplesList as Like below
102-
103-
```
104-
import * as React from 'react';
105-
import { GridSampleOrder } from '../grid/config';
106-
107-
export let samplesList: any = [
108-
109-
{
110-
'name': 'Grid', 'category': 'Grids', 'order': '02', 'path': 'grid', 'samples': GridSampleOrder
111-
}
112-
];
113-
```
114-
115-
## Adding your control dependency
116-
117-
Add your dependency in “package.json” file inside the dependencies.
118-
119-
Note: Here, '\*' Specifies that install the latest published package form the online. '\*' is recommended for Syncfusion packages.
120-
121-
```
122-
"dependencies": {
123-
"@syncfusion/ej2-react-grids": "*"
124-
},
125-
```
126-
# Using the samples
127-
128-
## Installing
129-
130-
Before installation check `@syncfusion:registry=http://nexus.syncfusion.com/repository/ej2-production/` is available in npmrc file. Then use the below command to install all dependent packages.
131-
132-
```
15+
```bash
13316
npm install
13417
```
13518

136-
## Build
137-
138-
Use `npm run build` command to compile the source files. It calls the following tasks synchronously,
139-
140-
1. SEO changes
141-
2. Build
142-
3. Styles ship
143-
4. Site-map generate.
19+
2. Start the development server using gulp
14420

145-
### SEO changes
146-
147-
It will set meta data and description for the h1 tag to show our components first in search engine. Use the below command to run it individual.
148-
149-
```
150-
gulp SEO-changes
151-
```
152-
153-
### Build
154-
155-
Use the below command to generate scripts, styles, locale and sample lists.
156-
157-
```
158-
gulp build
159-
```
160-
It runs the following tasks synchronously,
161-
162-
1. Scripts
163-
2. Styles
164-
165-
#### **Scripts**
166-
167-
It compiles the Typescript files and use the below command to run this task.
168-
169-
```
170-
gulp scripts
171-
```
172-
173-
#### **Styles**
174-
175-
`gulp styles` command is used to compile default themes. It calls the following two tasks synchronously.
176-
177-
1. Default theme
178-
2. Compile styles
179-
180-
#### Default theme
181-
182-
Use the below command to generate default theme files.
183-
184-
```
185-
gulp default-theme
186-
```
187-
188-
#### Compile Styles
189-
It compiles the scss file to css file. To run this task use the below command,
190-
191-
```
192-
gulp compile-styles
193-
```
194-
195-
### Styles Shipping
196-
197-
It copies css files for themes from node_modules. Use the below command to run it individual.
198-
199-
```
200-
gulp styles-ship
201-
```
202-
203-
### Site map generation
204-
205-
The below command combines sample of all components and store it in sitemap-demos.xml file to index our components, samples, documents in search engine.
206-
207-
```
208-
gulp sitemap-generate
209-
```
210-
211-
## Running the Sample Browser
212-
213-
To run your sample browser you can use any of the following command.
214-
215-
```
21+
```bash
21622
gulp serve
21723
```
24+
25+
3. Open your web browser and navigate to the specified localhost address to view the samples.

0 commit comments

Comments
 (0)