|
1 | | -# Syncfusion React Component Demo Samples |
| 1 | +# React Sample Configuration |
2 | 2 |
|
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. |
| 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. |
4 | 5 |
|
5 | | -## Prerequisites |
| 6 | +_Note: Do not use whitespace at any cause in folder’s name. Use “-” instead of space._ |
6 | 7 |
|
7 | | -- [Node.js](https://nodejs.org/en) - `v10.24.1` |
| 8 | +## Adding the sample |
8 | 9 |
|
9 | | -## Run the samples |
| 10 | +Add the sample component tsx file in the sample folder.Below steps are need to be considered on sample creation |
10 | 11 |
|
11 | | -To run the sample applications locally, follow these steps |
| 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**. |
12 | 15 |
|
13 | | -1. Install the required dependencies using npm |
| 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 | +} |
14 | 35 |
|
15 | | -```bash |
| 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 | +``` |
16 | 133 | npm install |
17 | 134 | ``` |
18 | 135 |
|
19 | | -2. Start the development server using gulp |
| 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. |
| 144 | + |
| 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. |
20 | 148 |
|
21 | | -```bash |
22 | | -gulp serve |
| 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 |
23 | 201 | ``` |
24 | 202 |
|
25 | | -3. Open your web browser and navigate to the specified localhost address to view the samples. |
| 203 | +### Site map generation |
26 | 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 | +``` |
| 216 | +gulp serve |
| 217 | +``` |
0 commit comments