init(apiKey)

Initializes ReportLayer with your API key for authentication. The API key is required in order to access your templates.

When using the Playground, the API key is the string 'playground'.

In ReportLayer, you can find your API key by opening a template and clicking the Deployment tab. The API key is shown on the right side.

When using the React components, you do not need to call init; provide your API key as a property of the component instead.

Example

import reportlayer from 'reportlayer';

reportlayer.init('playground');

render(elementOrSelector, templateId, [data])

Renders the specified template into the specified HTML container element, optionally filling the template with the provided data. If data is not provided, the report's stored dummy data is used.

elementOrSelector is either a DOM element (usually a <div>), or a CSS selector that uniquely identifies the target element. For example, if the target element has HTML id="report", then use the selector '#report'.

Example

import reportlayer from 'reportlayer';

reportlayer.init('playground');

// Render the report into an existing <div> with id="report",

// using the template's dummy data

reportlayer.render('#report', 'demo:packingSlip');

// Same as above, but use dynamic data instead of dummy data

reportlayer.render('#report', 'demo:packingSlip', {

name: 'John Public',

address: {

// ...

}

});

download(templateId, [data])

Generates a PDF from the specified template and downloads it, optionally filling the template with the provided data. If data is not provided, the report's stored dummy data is used.

Example

import reportlayer from 'reportlayer';

reportlayer.init('playground');

// Generate PDF file using the template's dummy data

reportlayer.download('');

// Generate PDF file using dynamic data instead of dummy data

reportlayer.download('', {

customer: {

name: 'John Public',

},

// ...

});

React Components

DocumentView

Renders a report on-screen.

Example

<DocumentView

templateId={'demo:packingSlip'}

apiKey={'playground'}

style={{ height: '500px' }}

/>

Prop	Type	Default	Description
templateId	string		The ID of the template to render
apiKey	string		The ReportLayer API key for your account, or 'playground' for public Playground templates
data	object	If not provided, uses template's dummy data	A JavaScript object matching the structure of the template's dummy data, containing the data to use to populate the report

Any other properties are passed through and set on the generated <div> element.

DownloadLink

Renders a link that downloads the report to a PDF file when clicked.

Example

<DownloadLink templateId={'demo:packingSlip'} apiKey={'playground'}>

<button>Click me to download the PDF</button>

</DownloadLink>

Prop	Type	Default	Description
templateId	string		The ID of the template to render
apiKey	string		The ReportLayer API key for your account, or 'playground' for public Playground templates
data	object	If not provided, uses template's dummy data	A JavaScript object matching the structure of the template's dummy data, containing the data to use to populate the report

Any other properties are passed through and set on the generated <a> element.