Qureal Editor

Official Qureal React Components

Install

npm install qureal-editor

Usage

import React from "react";
import { QurealViewer } from "qureal-editor";

function App() {
    return (
        <QurealViewer
            slug="test_21"
            prefill={{
                user: {
                    name: "Hello Name",
                    city: "Pipariya"
                }
            }}
            onFormSubmit={(form_data)=>{
                console.log("Data filled in form", form_data);
            }}
            style={{
                width: "800px",
                height: "90vh",
                border: "1px solid black"
            }}
        />
    );
}

For efficieny in case of multiple creations rendering, do not destroy the component, just update slug prop.

Triggering actions download, share

import React from "react";
import { QurealViewer, useQurealActions } from "qureal-editor";

function App() {
    const { actionRef, download, share } = useQurealActions();

    return (
        <div>
            <button onClick={download}>Download</button>
            <button onClick={share}>Share</button>
            <QurealViewer
                slug="test_21"
                actionRef={actionRef}    
            />
        </div>
    );
}

More props

Props

| Prop | Description | Default value | | --- | --- | --- | | slug | required, slug of the creation / template id | - | | prefill | optional, data to be prefilled in the creation | {} | | onFormSubmit | optional, callback function when form is submitted | (data)=> {} | | preview | preview mode | true | | fit | zoom 100% | false | | organization | Qureal organization id | null | | person | Qureal person id | null | | background | overwrite background color | null |

License

MIT © shivampip