react-page-renderer
v0.0.44
Published
My React Component
Downloads
28
Readme
react-page-renderer
It generates pages for document according to PTT and renders react components to HTML.
- HtmlPagesRenderer - pages are displayed in continuous sequence
- HtmlBookRenderer - pages are book view using turn
Demo & Examples
To build the examples locally, run:
npm install
gulp dev
Then open localhost:8000
in a browser.
Installation
The easiest way to use react-page-renderer is to install it from NPM and include it in your own React build process (using Browserify, Webpack, etc).
You can also use the standalone build by including dist/react-page-renderer.js
in your page. If you use this, make sure you have already included React, and it is available as a global variable.
npm install react-page-renderer --save
Usage
var React = require('react');
var HtmlPagesRenderer = require('react-page-renderer').HtmlPagesRenderer;
var PDFPagesTrigger = require('react-page-renderer').PDFPagesTrigger;
//widgets
import Core from 'react-designer-widgets';
import Shapes from 'react-shapes';
import Chart from 'react-pathjs-chart';
import Griddle from 'griddle-react';
var Widgets = {
'Core.TextBoxInput': Core.TextBoxInput,
'Core.CheckBoxInput': Core.CheckBoxInput,
'Core.SelectBoxInput': Core.SelectBoxInput,
'Core.JSXBox': Core.JSXBox,
'Core.TextBox': Core.TextBox,
'Core.ValueBox': Core.ValueBox,
'Core.HtmlBox': Core.HtmlBox,
'Core.ImageBox': Core.ImageBox,
'Core.ImagePanel': Core.ImagePanel,
'Core.Flipper': Core.Flipper,
'Core.TangleNumberText': Core.TangleNumberText,
'Core.TangleBoolText': Core.TangleBoolText,
'Shapes.Rectangle': Shapes.Rectangle,
'Shapes.Ellipse': Shapes.Ellipse,
'Shapes.Circle': Shapes.Circle,
'Shapes.Line': Shapes.Line,
'Shapes.Polyline': Shapes.Polyline,
'Shapes.CornerBox': Shapes.CornerBox,
'Shapes.Triangle': Shapes.Triangle,
'Shapes.Dimension': Shapes.Dimension,
'Chart.Pie': Chart.Pie,
'Chart.Bar': Chart.Bar,
'Chart.SmoothLine': Chart.SmoothLine,
'Chart.StockLine': Chart.StockLine,
'Chart.Scatterplot': Chart.Scatterplot,
'Chart.Radar': Chart.Radar,
'Chart.Tree': Chart.Tree,
'react-griddle':Griddle
};
var App = React.createClass({
getInitialState(){
return {data:this.props.schema.data || {}}
},
getDefaultProps(){
var visibility = {"elementName":"ObjectSchema","name":"rootContainer","containers":[{"name":"container","elementName":"Container","style":{"top":0,"left":0,"height":109,"width":700,"position":"relative"},"boxes":[{"name":"CheckBoxInput","elementName":"CheckBoxInput","style":{"top":13,"left":11},"label":"Conditon 1","Binding":"ShowSection1"},{"name":"Copy CheckBoxInput","elementName":"CheckBoxInput","style":{"top":16,"left":135},"label":"Conditon 2","Binding":"ShowSection2"}],"containers":[]},{"name":"container","elementName":"Container","style":{"top":0,"left":0,"height":270,"width":746,"position":"relative"},"boxes":[],"containers":[{"name":"first","elementName":"Container","style":{"top":0,"left":0,"height":68,"width":695,"position":"relative"},"boxes":[{"name":"HtmlBox","elementName":"HtmlBox","style":{"top":10,"left":-5},"content":"<p>This section should be <strong>visible only if condition 1 is met.</strong></p>"}],"containers":[],"Visibility":{"Path":"ShowSection1"}},{"name":"second","elementName":"Container","style":{"top":0,"left":0,"height":68,"width":695,"position":"relative"},"boxes":[{"name":"HtmlBox","elementName":"HtmlBox","style":{"top":10,"left":-5},"content":"<p>This section should be <strong>always visible.</strong></p>"}],"containers":[],"Visibility":{}},{"name":"third","elementName":"Container","style":{"top":0,"left":0,"height":68,"width":695,"position":"relative"},"boxes":[{"name":"HtmlBox","elementName":"HtmlBox","style":{"top":10,"left":-5},"content":"<p>This section should be <strong>visible only if condition 2 is met.</strong></p>"}],"containers":[],"Visibility":{"Path":"ShowSection2"}},{"name":"fourt","elementName":"Container","style":{"top":0,"left":0,"height":68,"width":695,"position":"relative"},"boxes":[{"name":"HtmlBox","elementName":"HtmlBox","style":{"top":10,"left":-5},"content":"<p>This section should be <strong>always visible.</strong></p>"}],"containers":[],"Visibility":{}}]},{"name":"Copy container","elementName":"Container","style":{"top":0,"left":0,"height":270,"width":746,"position":"relative"},"boxes":[],"containers":[{"name":"first","elementName":"Container","style":{"top":0,"left":0,"height":68,"width":695,"position":"relative"},"boxes":[{"name":"HtmlBox","elementName":"HtmlBox","style":{"top":10,"left":-5},"content":"<p>This section should be <strong>visible only if condition 1 is met.</strong></p>"}],"containers":[],"Visibility":{"Path":"ShowSection1"}},{"name":"second","elementName":"Container","style":{"top":0,"left":0,"height":68,"width":695,"position":"relative"},"boxes":[{"name":"HtmlBox","elementName":"HtmlBox","style":{"top":10,"left":-5},"content":"<p>This section should be <strong>always visible.</strong></p>"}],"containers":[],"Visibility":{}},{"name":"third","elementName":"Container","style":{"top":0,"left":0,"height":68,"width":695,"position":"relative"},"boxes":[{"name":"HtmlBox","elementName":"HtmlBox","style":{"top":10,"left":-5},"content":"<p>This section should be <strong>visible only if condition 2 is met.</strong></p>"}],"containers":[],"Visibility":{"Path":"ShowSection2"}},{"name":"fourt","elementName":"Container","style":{"top":0,"left":0,"height":68,"width":695,"position":"relative"},"boxes":[{"name":"HtmlBox","elementName":"HtmlBox","style":{"top":10,"left":-5},"content":"<p>This section should be <strong>always visible.</strong></p>"}],"containers":[],"Visibility":{}}]},{"name":"Copy Copy container","elementName":"Container","style":{"top":0,"left":0,"height":270,"width":746,"position":"relative"},"boxes":[],"containers":[{"name":"first","elementName":"Container","style":{"top":0,"left":0,"height":68,"width":695,"position":"relative"},"boxes":[{"name":"HtmlBox","elementName":"HtmlBox","style":{"top":10,"left":-5},"content":"<p>This section should be <strong>visible only if condition 1 is met.</strong></p>"}],"containers":[],"Visibility":{"Path":"ShowSection1"}},{"name":"second","elementName":"Container","style":{"top":0,"left":0,"height":68,"width":695,"position":"relative"},"boxes":[{"name":"HtmlBox","elementName":"HtmlBox","style":{"top":10,"left":-5},"content":"<p>This section should be <strong>always visible.</strong></p>"}],"containers":[],"Visibility":{}},{"name":"third","elementName":"Container","style":{"top":0,"left":0,"height":68,"width":695,"position":"relative"},"boxes":[{"name":"HtmlBox","elementName":"HtmlBox","style":{"top":10,"left":-5},"content":"<p>This section should be <strong>visible only if condition 2 is met.</strong></p>"}],"containers":[],"Visibility":{"Path":"ShowSection2"}},{"name":"fourt","elementName":"Container","style":{"top":0,"left":0,"height":68,"width":695,"position":"relative"},"boxes":[{"name":"HtmlBox","elementName":"HtmlBox","style":{"top":10,"left":-5},"content":"<p>This section should be <strong>always visible.</strong></p>"}],"containers":[],"Visibility":{}}]},{"name":"Copy Copy Copy container","elementName":"Container","style":{"top":0,"left":0,"height":270,"width":746,"position":"relative"},"boxes":[],"containers":[{"name":"first","elementName":"Container","style":{"top":0,"left":0,"height":68,"width":695,"position":"relative"},"boxes":[{"name":"HtmlBox","elementName":"HtmlBox","style":{"top":10,"left":-5},"content":"<p>This section should be <strong>visible only if condition 1 is met.</strong></p>"}],"containers":[],"Visibility":{"Path":"ShowSection1"}},{"name":"second","elementName":"Container","style":{"top":0,"left":0,"height":68,"width":695,"position":"relative"},"boxes":[{"name":"HtmlBox","elementName":"HtmlBox","style":{"top":10,"left":-5},"content":"<p>This section should be <strong>always visible.</strong></p>"}],"containers":[],"Visibility":{}},{"name":"third","elementName":"Container","style":{"top":0,"left":0,"height":68,"width":695,"position":"relative"},"boxes":[{"name":"HtmlBox","elementName":"HtmlBox","style":{"top":10,"left":-5},"content":"<p>This section should be <strong>visible only if condition 2 is met.</strong></p>"}],"containers":[],"Visibility":{"Path":"ShowSection2"}},{"name":"fourt","elementName":"Container","style":{"top":0,"left":0,"height":68,"width":695,"position":"relative"},"boxes":[{"name":"HtmlBox","elementName":"HtmlBox","style":{"top":10,"left":-5},"content":"<p>This section should be <strong>always visible.</strong></p>"}],"containers":[],"Visibility":{}}]}],"data":{}};
return {schema:visibility}
},
render: function() {
var schema = this.props.schema;
return (
<HtmlPagesRenderer widgets={Widgets} schema={schema} data={this.state.data} pageOptions={{margin:{top:20, left: 20}}} />
)
}
});
React.render(<App />, document.getElementById('app'));
Properties
HtmlPagesRenderer
- widgets - the list of widgets used for rendering
- schema - document to print - PTT format
- data - data used to data bind values to schemas
- pageOptions - height and width of the page , margin of the page
HtmlBookRenderer
- widgets - the list of widgets used for rendering
- schema - document to print - PTT format
- data - data used to data bind values to schemas
- pageOptions - height and width of the page , margin of the page