Add React sample

stimulsoft · Jan 23, 2018 · 7be14b5 · 7be14b5
1 parent adc3274
commit 7be14b5
Show file tree

Hide file tree

Showing 24 changed files with 62,363 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -1,8 +1,9 @@
-## This repository contains samples for Stimulsoft Reports.JS - a reporting tool for Node.js, JavaScript, ASP.NET, PHP, Angular, Angular and Vue.js applications.
+## This repository contains samples for Stimulsoft Reports.JS - a reporting tool for Node.js, JavaScript, ASP.NET, PHP, Angular, Angular, React and Vue.js applications.
 
 * In the [ASP.NET folder](https://github.com/stimulsoft/Samples-JS/tree/master/ASP.NET) you can find examples of using Stimulsoft Reports.JS with ASP.NET applications.
 * The [AngularJS folder](https://github.com/stimulsoft/Samples-JS/tree/master/AngularJS) contains examples of integration the Stimulsoft Reports.JS into simple Angular.JS project.
 * The [Angular folder](https://github.com/stimulsoft/Samples-JS/tree/master/Angular) contains examples of integration the Stimulsoft Reports.JS into simple Angular project.
+* The [React folder](https://github.com/stimulsoft/Samples-JS/tree/master/React) contains examples of integration the Stimulsoft Reports.JS into simple React project.
 * [There is](https://github.com/stimulsoft/Samples-JS/tree/master/Demo) the demo project written in the HTML/JS in the Demo folder. This application demonstrates using Stimulsoft Reports.JS without any server side – it works in the browser from the local disk storage. Many types of reports are available for work.
 * [Here](https://github.com/stimulsoft/Samples-JS/tree/master/JavaScript) are many samples of using Stimulsoft Reports.JS in the JavaScript applications in the JavaScript folder. Any web-server is needed to launch this example.
 * In the [Node.js folder](https://github.com/stimulsoft/Samples-JS/tree/master/Node.js) you can use examples of using Stimulsoft Reports.JS on the server-side with the Node.js applications.

diff --git a/React/01. Working with report designer/README.md b/React/01. Working with report designer/README.md
@@ -0,0 +1,10 @@
+# Stimulsoft Reports.JS + React
+
+This simple demo illustrates integration of Stimulsoft Reports.JS into an React project.
+
+## Build & development
+
+* run ``` npm install ``` to install nmp modules
+
+* then run ``` npm start ``` for a dev server. Navigate to ``` http://localhost:8080/ ```.
+
diff --git a/React/01. Working with report designer/index.html b/React/01. Working with report designer/index.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <title>Hello React</title>
+    <link rel="stylesheet" href="stimulsoft/stimulsoft.designer.office2013.whiteblue.css">
+    <link rel="stylesheet" href="stimulsoft/stimulsoft.viewer.office2013.whiteblue.css">
+</head>
+
+<body>
+    <div id="main"></div>
+
+    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
+    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
+    <script src="stimulsoft/stimulsoft.reports.js"></script>
+    <script src="stimulsoft/stimulsoft.viewer.js"></script>
+    <script src="stimulsoft/stimulsoft.designer.js"></script>
+    <script type="text/babel">
+        class Designer extends React.Component {
+            render() {
+                return <div id="designer"></div>;
+            }          
+
+            componentDidMount(){
+                console.log('Loading Designer view');
+
+                console.log('Set full screen mode for the designer');
+                var options = new window.Stimulsoft.Designer.StiDesignerOptions();
+                options.appearance.fullScreenMode = false;
+
+                console.log('Create the report designer with specified options');
+                var designer = new window.Stimulsoft.Designer.StiDesigner(options, 'StiDesigner', false);
+
+                console.log('Create a new report instance');
+                var report = new window.Stimulsoft.Report.StiReport();
+
+                console.log('Load report from url');
+                report.loadFile('reports/SimpleList.mrt');
+
+                console.log('Edit report template in the designer');
+                designer.report = report;  
+
+                designer.renderHtml("designer");
+          }
+        }
+        ReactDOM.render(
+            <Designer />,
+            document.getElementById("main")
+        )        
+    </script>
+</body>
+
+</html>