This repository contains over 500 examples on how to use Ignite UI for React components:
- Charts: Area, Bar, Column, Composite, Donut, Financial/Stock, Line, Pie, Polar, Radial, Scatter, Shape, Sparkline, Stacked, Step,
- Maps: Geographic Map, Treemap,
- Gauges: Bullet Graph, Linear Gauge, Radial Gauges
- Grids & Lists: Grid, List, Tree, Table / Grid, Spreadsheet
- Other: Dock Manager, Date Picker, Multi-Column Combobox
NOTE: You should use master branch of this repository if you want to run samples on your computer. Use the vnext branch only when you want to contribute new samples to this repository.
You can preview and browse all samples in this repository by opening our React Samples Browser. Alternatively, you you can view these samples with detailed information in our React Help Documentation.
In addition, you can run each sample project individually from the ./samples folder or you can run from the ./browser folder to browse all samples in one website (see instructions below). You can run each sample on Code Sandbox website by clicking on the Edit Sandbox button in a readme file of sample project, e.g.
./samples/charts/category-chart/overview/README.md
To set up this project locally, clone this repository:
git clone https://github.com/IgniteUI/igniteui-react-examples.git
-
check out the master branch
-
in VS Code, open a folder with existing sample, e.g.
./samples/charts/category-chart/axis-options/
-
type
npm install --legacy-peer-deps
command in terminal window -
type
npm run start
command in terminal window -
Wait until the build is completed and then open http://localhost:4200 in your browser.
At this point, you should see a website hosted example of Ignite UI for React component
-
check out the master branch
-
open VS Code as Administrator
-
open the browser folder in this repository, e.g.
C:\GitHub\igniteui-react-examples\browser
-
select View - Terminal menu item
-
type
npm install --legacy-peer-deps
command in terminal window
This will install required packages and Ignite UI for React packages
- type
npm run start
command in terminal window to start this application locally
Note this application copies all individually sample projects from ./samples to ./browser/src folder when it is about to start running. Therefore, any changes to ./browser/src will be overridden on consecutive run of the application.
Wait until the build is completed and then open http://localhost:4200 in your browser. You should see a website with navigation menu for browning all samples in this repository.
-
create a new branch from the
vnext
branch -
open a folder with existing sample, e.g.
./samples/charts/category-chart/axis-options/
- copy the sample and rename the new folder, e.g.
./samples/charts/category-chart/axis-types/
-
open the newly created folder in VS Code
-
rename the .tsx file in src folder, using this naming convention:
ControlNameSampleName.tsx
./samples/charts/category-chart/axis-types/src/CategoryChartAxisTypes.tsx
-
open the .tsx file
-
rename class to the name of .tsx file
-
type
npm install --legacy-peer-deps
command in terminal window -
type
npm run start
command in terminal window -
implement the new sample in the .tsx file
-
close the new sample project in VS Code
-
delete
node_modules
folder in the new sample project -
follow instructions in the next section
-
open the root folder of this repository in VS Code
-
type
gulp updateSamples
command in terminal window
NOTE this will re-generate the Readme.md file in the new sample
-
type
npm run start
command in terminal window -
open http://localhost:4200 in your browser
-
verify that the new sample is listed in the navigation menu
-
verify that the new sample loads by clicking navigation link
-
verify that there are no errors in DEV console
-
take a screenshot of the new sample with navigation menu
-
commit your changes
-
create a pull request and target the
vnext
branch -
paste the screenshot in you pull request
-
submit your pull request
To learn more about Ignite UI for React components, check out the React documentation.
NOTE Do NOT find replace version of packages in package.json files.
- open this repo in VS Code
- open ./browser/tasks/gulp-samples.js file
- navigate to the
updateIG
function - update version of packages in
packageUpgrades
array - open terminal window
- run
cd browser
command - run the
gulp updateIG
command - run
npm install --legacy-peer-deps
command - create AND merge a pull request with changes in all package.json files in this repository
- create 2nd pull request with similar changes in
/editor-templates/react/main-template/package.json
of the igniteui-xplat-examples repository.