Qureal Editor

Official Qureal React Components

Installation

npm install qureal-editor@latest

QurealViewer

To integrate single creation (creation or template)

| prop | description | default | | ------------- | ---------------------------------- | ------------ | | type | creation or template | creation | | slug | actual slug | - | | organization | organization id | - | | person | person id | - | | prefill | prefill json | {} | | style | wrapper style | {} | | onFormSubmit | callback for form submit with data | - | | preview | open in preview mode | false | | fit | zoom 100% | true | | background | overwrite background color | black | | creation_type | singlepage , document etc. | singlepage |

Example

<QurealViewer
    type="creation"
    slug="singlepage_2iByO"
    organization="list_app_7PVDB"
    preview={false}
    fit={true}
    background="aliceblue"
    prefill={{
        user: {
            name: "Hello Name",
            city: "Pipariya"
        },
        ai_model: {
            model: "e9c8b5c4-4a2f-4c15-85a4-a57669a00999"
        }
    }}
    onFormSubmit={(form_data) => {
        console.log("Data filled in form", form_data);
    }}
    style={{
        width: "1100px",
        height: "90vh",
        border: "1px solid black",
        borderRadius: "10px",
    }}
/>

QurealCollection

To integrate a collection (collection of creations / templates)

| prop | description | default | | ------------ | --------------- | ------- | | id | collection id | - | | organization | organization id | - | | person | person id | - | | prefill | prefill json | - | | | | |

Example

<QurealCollection
    collection_id="934ffe42-1d0a-4fa0-ad23-60b066c0b9ab"
    organization="[email protected]"
    background="black"
    style={{
        width: "1100px",
        height: "40vh",
        border: "1px solid black",
        borderRadius: "10px",
    }}
/>

useQurealActions

To perform action on currently opened creation in QurealViewer or QurealCollection

| returned_value | description | | -------------- | ---------------------------------------------------- | | actionRef | pass it to QurealViewer or QurealCollection | | download | function to download current opened creation | | share | function to trigger share event for current creation | | next | function to open next creation in QurealCollection | | prev | function to open prev creation in QurealColection | | | |

Example

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>
    );
}

License

MIT © shivampip